网格区域 - grid-column/row

使用 grid-column/row 精确控制项目位置

⚠️ 重要概念：网格线（Grid Lines）

网格线数量 = 轨道数量 + 1

如果有 3 行，就有 4 条横向网格线：

  • 线 1：第 1 行之前
  • 线 2：第 1 行和第 2 行之间
  • 线 3：第 2 行和第 3 行之间
  • 线 4：第 3 行之后

同理，4 列就有 5 条纵向网格线

📊 网格线可视化

列线:  1    2    3    4    5
       |    |    |    |    |
   1 —┌────┬────┬────┬────┐
       │    │    │    │    │
   2 —├────┼────┼────┼────┤
       │    │    │    │    │
   3 —├────┼────┼────┼────┤
       │    │    │    │    │
   4 —└────┴────┴────┴────┘
行线

示例：
• grid-column: 1 / 3  → 从列线1到列线3（占2列）
• grid-row: 2 / 4     → 从行线2到行线4（占2行）
/* 蓝色项目 1：跨 2 列，占第 1 行 */
.item1 {
  grid-column: 1 / 3; /* 从列线1到列线3 = 占2列 */
  grid-row: 1 / 2; /* 从行线1到行线2 = 占1行 */
}

/* 红色项目 2：跨 2 列 2 行 */
.item2 {
  grid-column: 3 / 5; /* 从列线3到列线5 = 占2列 */
  grid-row: 1 / 3; /* 从行线1到行线3 = 占2行 */
}

/* 绿色项目 3：跨 2 行 */
.item3 {
  grid-column: 1 / 2; /* 从列线1到列线2 = 占1列 */
  grid-row: 2 / 4; /* 从行线2到行线4 = 占2行 */
}
项目 1
跨2列
项目 2
跨2列2行
项目 3
跨2行
4
5
6