CSS中的网格布局（Grid Layout）对齐与排列属性详解

一、属性描述
CSS Grid布局中的对齐与排列属性用于控制网格项目在网格容器内的对齐方式。这些属性分为两大类别：

1. 网格容器属性：justify-content、align-content、place-content
2. 网格项目属性：justify-self、align-self、place-self

这些属性基于CSS盒模型对齐规范（Box Alignment Module），与Flexbox共享相同的对齐逻辑。

二、网格容器对齐属性详解

1. justify-content
   控制整个网格在水平方向（行轴）的对齐方式，适用于网格总尺寸小于容器的情况

.container {
  display: grid;
  grid-template-columns: 100px 100px; /* 总宽度200px */
  width: 400px; /* 容器宽度大于网格总宽度 */
  justify-content: start; /* 默认值，左对齐 */
}

可选值：

• start：网格左对齐
• end：网格右对齐
• center：网格居中对齐
• stretch：拉伸网格列填满容器（需要未固定尺寸时）
• space-around：每个网格两侧均匀分布空白
• space-between：首尾网格贴边，中间均匀分布
• space-evenly：所有间隔完全相等

2. align-content
   控制整个网格在垂直方向（列轴）的对齐方式

.container {
  height: 300px;
  grid-template-rows: 50px 50px; /* 总高度100px */
  align-content: center; /* 垂直居中对齐 */
}

取值与justify-content相同，但作用于垂直方向

3. place-content
   简写属性：align-content justify-content

.container {
  place-content: center end; /* 垂直居中，水平右对齐 */
}

三、网格项目自对齐属性详解

1. justify-self
   控制单个网格项目在单元格内的水平对齐

.item {
  justify-self: stretch; /* 默认值，拉伸填满单元格宽度 */
}

可选值：

• start：项目左对齐
• end：项目右对齐
• center：水平居中
• stretch：拉伸填满（默认）

2. align-self
   控制单个网格项目在单元格内的垂直对齐

.item {
  align-self: end; /* 项目在单元格底部对齐 */
}

取值与justify-self相同，作用于垂直方向

3. place-self
   简写属性：align-self justify-self

.item {
  place-self: center stretch; /* 垂直居中，水平拉伸 */
}

四、实际应用示例

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 80px);
  width: 500px;
  height: 300px;
  border: 2px solid #333;
  justify-content: space-between; /* 水平均匀分布 */
  align-content: center; /* 垂直居中 */
}

.item {
  background: #4CAF50;
  padding: 10px;
}

.item-special {
  justify-self: end; /* 该项目在单元格内右对齐 */
  align-self: start; /* 该项目在单元格内顶部对齐 */
}

五、注意事项

1. 对齐属性只在网格总尺寸小于容器时生效
2. stretch值需要项目尺寸未固定才能生效
3. 网格项目的对齐优先级高于容器对齐设置
4. 这些属性在现代浏览器中支持良好，但需注意兼容性前缀

通过合理使用这些对齐属性，可以精确控制网格布局中每个元素的位置，实现复杂的布局需求。