CSS中的网格布局（Grid Layout）子项属性详解

描述
网格布局（Grid Layout）的子项属性用于控制网格容器内直接子元素（网格项）在网格中的位置、对齐方式和层叠顺序等行为。这些属性为开发者提供了精细控制每个网格项在网格中布局的能力，是构建复杂二维布局的关键。

解题过程

1. 理解网格布局基础

• 网格布局将网页划分为行和列，形成网格结构
• 网格容器（父元素）通过display: grid定义
• 网格项（子元素）通过子项属性控制具体位置

2. 网格项定位属性

grid-row-start / grid-row-end / grid-column-start / grid-column-end

• 作用：定义网格项在网格中的起始和结束位置
• 取值：
  • 数字：指定具体的网格线编号（从1开始）
  • span 数字：跨越指定数量的网格轨道
  • 网格线名称：使用已命名的网格线

.item {
  grid-row-start: 1;      /* 从第1条行网格线开始 */
  grid-row-end: 3;        /* 到第3条行网格线结束 */
  grid-column-start: 2;   /* 从第2条列网格线开始 */
  grid-column-end: span 2; /* 跨越2列 */
}

3. 简写属性

grid-row / grid-column

• 作用：合并行/列的开始和结束位置定义
• 语法：grid-row: <start-line> / <end-line>
• 特殊值：
  • span：表示跨越
  • auto：自动放置

.item {
  grid-row: 1 / 3;        /* 等价于 grid-row-start:1; grid-row-end:3 */
  grid-column: 2 / span 2; /* 等价于上述列定义 */
}

4. 网格区域定位

grid-area

• 作用：通过网格区域名称或行列位置定义网格项位置
• 四种用法：
  1. 指定区域名称：grid-area: header;
  2. 指定行列位置：grid-area: 1 / 1 / 3 / 3;（行开始/列开始/行结束/列结束）
  3. 配合grid-template-areas使用
  4. 作为grid-row-start等四个属性的简写

.container {
  grid-template-areas: 
    "header header"
    "sidebar content";
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

5. 对齐控制属性

justify-self / align-self / place-self

• justify-self：控制网格项在单元格内的水平对齐
• align-self：控制网格项在单元格内的垂直对齐
• place-self：align-self justify-self的简写形式
• 取值：start | end | center | stretch

.item {
  justify-self: center;   /* 水平居中 */
  align-self: end;       /* 垂直底部对齐 */
  place-self: center end; /* 水平居中，垂直底部对齐 */
}

6. 层叠顺序控制

z-index

• 作用：当网格项重叠时控制层叠顺序
• 数值越大，显示在越上层
• 在网格布局中，即使设置定位属性为static也能生效

.item {
  z-index: 1; /* 控制重叠时的显示顺序 */
}

7. 实际应用示例

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
}

.item-1 {
  grid-row: 1 / 3;        /* 占据第1-2行 */
  grid-column: 1 / 2;     /* 占据第1列 */
  justify-self: stretch;  /* 水平拉伸填充 */
}

.item-2 {
  grid-area: 2 / 2 / 4 / 4; /* 从第2行第2列到第4行第4列 */
  align-self: center;     /* 垂直居中 */
  z-index: 2;            /* 设置层叠顺序 */
}

8. 注意事项

• 网格项属性只对网格容器的直接子元素有效
• 当网格项位置重叠时，后出现的元素默认覆盖先出现的元素
• 使用z-index可以改变默认的层叠顺序
• 对齐属性会覆盖容器上设置的对齐属性（具有更高优先级）