编辑“︁CSS网格对齐”︁（章节）

= CSS网格对齐 =

CSS网格对齐（CSS Grid Alignment）是CSS网格布局（CSS Grid Layout）模块中的核心功能，它允许开发者通过一组属性精确控制网格容器（Grid Container）和网格项目（Grid Items）在行和列方向上的对齐方式。网格对齐基于CSS盒模型对齐规范（CSS Box Alignment Module Level 3），提供了灵活的空间分配方法，适用于一维和二维布局场景。

== 基本概念 ==

CSS网格对齐包含以下关键属性：

* '''justify-items'''：控制网格项目在行轴（水平方向）的对齐方式。
* '''align-items'''：控制网格项目在列轴（垂直方向）的对齐方式。
* '''justify-content'''：控制整个网格在行轴（水平方向）的对齐方式（当网格总尺寸小于容器时）。
* '''align-content'''：控制整个网格在列轴（垂直方向）的对齐方式（当网格总尺寸小于容器时）。
* '''justify-self'''：覆盖单个网格项目的行轴对齐方式。
* '''align-self'''：覆盖单个网格项目的列轴对齐方式。

这些属性支持以下对齐值：
* '''start''' / '''end'''：对齐到网格区域的起始或结束边缘。
* '''center'''：居中对齐。
* '''stretch'''（默认值）：拉伸填充整个网格区域。
* '''baseline'''：基于文本基线对齐。

== 代码示例 ==

=== 基础对齐示例 ===
以下示例展示了一个3×2网格，通过<code>justify-items</code>和<code>align-items</code>控制所有项目的对齐方式：

<syntaxhighlight lang="css">
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 80px 80px;
  gap: 10px;
  justify-items: center; /* 水平居中 */
  align-items: end;      /* 垂直底部对齐 */
  background-color: #f0f0f0;
  padding: 10px;
}

.grid-item {
  background-color: #4CAF50;
  padding: 10px;
}
</syntaxhighlight>

'''输出效果'''：
<div style="display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 80px 80px; gap: 10px; justify-items: center; align-items: end; background-color: #f0f0f0; padding: 10px;">
  <div style="background-color: #4CAF50; padding: 10px;">Item 1</div>
  <div style="background-color: #4CAF50; padding: 10px;">Item 2</div>
  <div style="background-color: #4CAF50; padding: 10px;">Item 3</div>
  <div style="background-color: #4CAF50; padding: 10px;">Item 4</div>
  <div style="background-color: #4CAF50; padding: 10px;">Item 5</div>
  <div style="background-color: #4CAF50; padding: 10px;">Item 6</div>
</div>

=== 单个项目对齐覆盖 ===
使用<code>justify-self</code>和<code>align-self</code>覆盖特定项目的对齐方式：

<syntaxhighlight lang="css">
.grid-item.special {
  justify-self: start; /* 水平左对齐 */
  align-self: center;  /* 垂直居中 */
}
</syntaxhighlight>

== 网格内容对齐 ==
当网格总尺寸小于容器时，<code>justify-content</code>和<code>align-content</code>控制剩余空间的分配方式：

<syntaxhighlight lang="css">
.grid-container-large {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 80px 80px;
  gap: 10px;
  height: 300px;
  width: 400px;
  justify-content: space-around; /* 水平均匀分布 */
  align-content: space-between; /* 垂直两端对齐 */
}
</syntaxhighlight>

'''可视化效果'''：
<mermaid>
graph TD
  A[Container] --> B[Grid]
  B --> C[space-around]
  B --> D[space-between]
</mermaid>

== 数学原理 ==
对齐属性基于以下空间计算：
* 剩余空间 = 容器尺寸 - (轨道尺寸总和 + 间距总和)
* 对齐偏移量按公式分配：
  <math>
  \text{offset} = \frac{\text{剩余空间} \times \text{权重}}{\text{总权重}}
  </math>

== 实际应用案例 ==
=== 仪表盘布局 ===
在仪表盘设计中，网格对齐可确保控件组保持视觉一致性：

<syntaxhighlight lang="css">
.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: center; /* 垂直居中所有卡片 */
}

.card:nth-child(2) {
  align-self: start; /* 第二个卡片顶部对齐 */
}
</syntaxhighlight>

=== 响应式图库 ===
结合媒体查询实现不同屏幕尺寸下的对齐策略：

<syntaxhighlight lang="css">
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center;
}

@media (max-width: 600px) {
  .gallery {
    justify-content: start; /* 小屏幕左对齐 */
    grid-auto-flow: row;    /* 改为行优先布局 */
  }
}
</syntaxhighlight>

== 浏览器兼容性 ==
所有现代浏览器均支持CSS网格对齐属性（包括Chrome、Firefox、Safari和Edge）。对于IE11等旧版浏览器，需要使用<code>-ms-</code>前缀版本属性。

== 最佳实践 ==
1. 优先使用<code>justify-items</code>/<code>align-items</code>设置全局对齐
2. 仅在需要时使用<code>*-self</code>属性进行局部覆盖
3. 结合<code>place-items</code>（复合属性）简化代码：
   <syntaxhighlight lang="css">
   .container {
     place-items: center end; /* align-items justify-items */
   }
   </syntaxhighlight>

== 参见 ==
* [[CSS网格布局]]
* [[Flexbox对齐]]
* [[CSS盒模型对齐规范]]

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS网格布局]]