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

今天我们来深入探讨CSS网格布局中专门应用于网格子项（grid items）的属性。这些属性让你能够精确控制每个子项在网格容器中的位置和大小。

1. 网格布局基础回顾
网格布局是二维布局系统，由网格容器（display: grid）和网格子项（直接子元素）组成。子项属性不设置在容器上，而是直接应用于各个子项。

2. 网格线定位属性
这些属性通过网格线来定位子项：

grid-row-start/grid-row-end - 定义子项在行方向的起始和结束位置

.item {
  grid-row-start: 2;    /* 从第2条行网格线开始 */
  grid-row-end: 4;      /* 到第4条行网格线结束 */
}

grid-column-start/grid-column-end - 定义子项在列方向的起始和结束位置

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

3. 简写属性
为了方便书写，CSS提供了简写形式：

grid-row - 合并grid-row-start和grid-row-end

.item {
  grid-row: 2 / 4;      /* 起始线 / 结束线 */
  grid-row: 2 / span 2; /* 起始线 / 跨越2个轨道 */
  grid-row: 2;          /* 只设置起始线，默认结束线为下一个 */
}

grid-column - 合并grid-column-start和grid-column-end

.item {
  grid-column: 1 / 3;
  grid-column: 1 / span 2;
  grid-column: 1;
}

4. grid-area属性
这是更强大的简写属性，有四种用法：

用法1：作为grid-row-start + grid-column-start + grid-row-end + grid-column-end的简写

.item {
  grid-area: 2 / 1 / 4 / 3;
  /* 顺序：row-start / column-start / row-end / column-end */
}

用法2：引用已命名的网格区域
如果容器中定义了网格区域模板：

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

子项可以这样定位：

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

5. 子项对齐属性
这些属性控制子项在其所在网格单元格内的对齐方式：

justify-self - 控制子项在水平方向的对齐

.item {
  justify-self: start;    /* 左对齐 */
  justify-self: center;   /* 水平居中 */
  justify-self: end;      /* 右对齐 */
  justify-self: stretch;  /* 拉伸填充（默认值） */
}

align-self - 控制子项在垂直方向的对齐

.item {
  align-self: start;     /* 顶部对齐 */
  align-self: center;    /* 垂直居中 */
  align-self: end;       /* 底部对齐 */
  align-self: stretch;   /* 拉伸填充（默认值） */
}

place-self - justify-self和align-self的简写

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

6. 实际应用示例
让我们创建一个完整的网格布局来演示这些属性：

<div class="grid-container">
  <div class="item header">Header</div>
  <div class="item sidebar">Sidebar</div>
  <div class="item main">Main Content</div>
  <div class="item footer">Footer</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 80px auto 60px;
  grid-template-areas: 
    "header header"
    "sidebar main"
    "footer footer";
  height: 400px;
  gap: 10px;
}

.header {
  grid-area: header;
  background: lightblue;
}

.sidebar {
  grid-area: sidebar;
  background: lightgreen;
  align-self: start; /* 侧边栏顶部对齐 */
}

.main {
  grid-area: main;
  background: lightyellow;
  justify-self: center; /* 主要内容水平居中 */
  align-self: center;   /* 主要内容垂直居中 */
}

.footer {
  grid-area: footer;
  background: lightcoral;
}

7. 高级定位技巧
你还可以使用负数的网格线编号和span关键字：

.item {
  /* 从倒数第2条线开始，跨越2个轨道 */
  grid-row: -2 / span 2;
  
  /* 从第1条线开始，到倒数第1条线结束 */
  grid-column: 1 / -1;
}

8. 层叠子项控制
当多个子项定位到相同的网格区域时，可以使用z-index控制层叠顺序：

.item1 { grid-area: 1 / 1 / 2 / 2; z-index: 1; }
.item2 { grid-area: 1 / 1 / 2 / 2; z-index: 2; } /* 显示在上层 */

这些网格子项属性提供了极其灵活和精确的布局控制能力，让你能够创建复杂的二维布局而无需额外的HTML结构。