如何创建含col span与row span的CSS Grid系统及解决布局错位问题

嘿，这个问题我之前也踩过坑——CSS Grid的自动排列规则有时候会“自作聪明”，当你调整某个元素的rowspan时，它会优先填充行内的可用空间，导致元素位置完全不符合预期。别慌，咱们通过明确指定每个网格项的位置就能轻松解决，先拆解你的目标布局：

你想要的是：

• 第一个盒子占4列、跨2行
• 接下来两个小盒子各占1列、1行，在右侧上下排列
• 最后一个盒子占1列、跨2行，在最右侧

方案1：用grid-column和grid-row精确定位 #

这种方式直接指定每个元素的网格线位置，彻底摆脱自动排列的干扰。

先写HTML结构：

<div class="grid-container">
  <div class="box box1">Box 1 (4 cols, 2 rows)</div>
  <div class="box box2">Box 2 (1 col, 1 row)</div>
  <div class="box box3">Box 3 (1 col, 1 row)</div>
  <div class="box box4">Box 4 (1 col, 2 rows)</div>
</div>

然后是CSS：

.grid-container {
  display: grid;
  /* 定义6列：前4列平分空间，后2列各占1份 */
  grid-template-columns: repeat(4, 1fr) 1fr 1fr;
  /* 定义2行，每行平分容器高度 */
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  height: 400px; /* 给容器一个固定高度方便演示 */
}

.box {
  padding: 20px;
  border: 2px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 逐个指定每个盒子的位置 */
.box1 {
  /* 从第1列开始，跨越4列；从第1行开始，跨越2行 */
  grid-column: 1 / span 4;
  grid-row: 1 / span 2;
  background: #f5a9a9;
}

.box2 {
  grid-column: 5; /* 固定在第5列 */
  grid-row: 1; /* 固定在第1行 */
  background: #a9d1f5;
}

.box3 {
  grid-column: 5; /* 固定在第5列 */
  grid-row: 2; /* 固定在第2行 */
  background: #a9f5d1;
}

.box4 {
  grid-column: 6; /* 固定在第6列 */
  grid-row: 1 / span 2; /* 跨越2行 */
  background: #f5d1a9;
}

方案2：用grid-template-areas可视化布局 #

如果你更喜欢直观的布局写法，可以用区域命名的方式，就像画表格一样定义结构：

.grid-container {
  display: grid;
  /* 直接画出布局结构，每个单词对应一个区域 */
  grid-template-areas:
    "box1 box1 box1 box1 box2 box4"
    "box1 box1 box1 box1 box3 box4";
  grid-template-columns: repeat(4, 1fr) 1fr 1fr;
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  height: 400px;
}

.box1 {
  grid-area: box1; /* 对应布局里的box1区域 */
  background: #f5a9a9;
}

.box2 {
  grid-area: box2;
  background: #a9d1f5;
}

.box3 {
  grid-area: box3;
  background: #a9f5d1;
}

.box4 {
  grid-area: box4;
  background: #f5d1a9;
}

为什么之前会错位？ #

默认情况下，CSS Grid的grid-auto-flow是row（行优先），它会尽可能填充每一行的可用空间。当你把第三个盒子的rowspan从1改成2时，Grid会认为这个盒子可以塞进前面行的空隙里，所以就把它移到了左边。而通过上面两种方式明确指定位置，我们强制每个元素呆在预设的网格区域里，自然就不会乱移位了。

内容的提问来源于stack exchange，提问作者Anthony Finix