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

一、知识描述
网格项对齐与排列属性用于控制网格项在网格区域内的对齐方式。与容器级的对齐属性不同，这些属性直接应用于网格项本身，可以精细控制单个项目在分配区域内的位置。主要包括justify-self、align-self和place-self三个属性。

二、属性详解

1. justify-self 属性

• 作用：控制网格项在水平方向（行轴）上的对齐方式
• 适用场景：单个网格项在网格区域内的水平对齐
• 属性值：
  • start：与网格区域的起始边缘对齐
  • end：与网格区域的结束边缘对齐
  • center：在网格区域内居中对齐
  • stretch（默认值）：拉伸填满整个网格区域

2. align-self 属性

• 作用：控制网格项在垂直方向（列轴）上的对齐方式
• 适用场景：单个网格项在网格区域内的垂直对齐
• 属性值：与justify-self相同，但作用方向为垂直方向

3. place-self 属性

• 作用：justify-self和align-self的简写形式
• 语法：place-self: <align-self> <justify-self>;
• 示例：
  • place-self: center; → 水平和垂直都居中
  • place-self: end start; → 垂直底部对齐，水平左对齐

三、实际应用示例

基础示例代码：

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
  gap: 10px;
  width: 320px;
  height: 210px;
  border: 2px solid #333;
}

.grid-item {
  background-color: #4CAF50;
  padding: 10px;
  color: white;
}

.item1 {
  justify-self: start;    /* 水平左对齐 */
  align-self: start;      /* 垂直顶对齐 */
}

.item2 {
  justify-self: center;   /* 水平居中 */
  align-self: center;     /* 垂直居中 */
}

.item3 {
  justify-self: end;      /* 水平右对齐 */
  align-self: end;        /* 垂直底对齐 */
}

.item4 {
  place-self: center;     /* 简写形式，水平垂直都居中 */
}

.item5 {
  place-self: end start;  /* 垂直底对齐，水平左对齐 */
}

.item6 {
  justify-self: stretch;  /* 水平拉伸 */
  align-self: stretch;    /* 垂直拉伸 */
}

对应HTML结构：

<div class="grid-container">
  <div class="grid-item item1">1: start start</div>
  <div class="grid-item item2">2: center center</div>
  <div class="grid-item item3">3: end end</div>
  <div class="grid-item item4">4: place-self center</div>
  <div class="grid-item item5">5: end start</div>
  <div class="grid-item item6">6: stretch stretch</div>
</div>

四、特殊情况处理

1. 固定尺寸项目的对齐
当网格项有固定尺寸时，对齐效果最明显：

.fixed-size {
  width: 60px;
  height: 60px;
  justify-self: center;  /* 在100px的网格区域内居中 */
  align-self: center;
}

2. 拉伸模式下的行为
当使用stretch值时，项目会填满整个网格区域，但受min/max尺寸限制：

.stretch-item {
  min-width: 50px;
  max-width: 80px;
  justify-self: stretch;  /* 实际宽度在50-80px之间 */
}

五、与容器级对齐属性的区别

• 容器级属性（justify-items、align-items）：设置所有网格项的默认对齐方式
• 项目级属性（justify-self、align-self）：覆盖容器级设置，针对单个项目

六、浏览器兼容性

• 现代浏览器全面支持
• 对于老旧浏览器，建议提供备用布局方案

通过掌握这些对齐属性，可以精确控制每个网格项在分配区域内的位置，实现更灵活的布局效果。