如何实现CSS Grid元素自动占整行或均分空间（仅指定grid-row）

具体要求 #

• 每个元素需手动指定grid-row属性，例如元素D设置grid-row: 6；
• 若某一行仅包含一个元素，该元素应占满整行，如元素A；
• 若某一行包含多个重叠元素，这些元素需均分该行空间，如元素B和C、D/E/F；
• 不得手动设置grid-column属性（如无需给元素F设置grid-column: 5 / 7），因为元素会被逐个插入网格，增减元素时其他元素需自动调整布局。

当前尝试的方案及问题 #

我尝试了以下代码，但无法实现需求：

CSS代码 #

.grid {
  height: 300px;
  width: 300px;
  display: grid;
  border: 1px solid red;
}

.item {
  border: 1px solid teal;
}

.item-a {
  grid-row: 1;
}

.item-b {
  grid-row: 2 / 4;
}

.item-c {
  grid-row: 3;
}

HTML代码 #

<div class="grid">
  <div class="item item-a">a</div>
  <div class="item item-b">b</div>
  <div class="item item-c">c</div>
</div>

可以看到，元素a并未占满整行；给所有元素设置grid-column: span 2只会新增列，无法改变布局。请问如何实现该目标布局？

要实现这种动态调整列数的Grid布局，核心是借助grid-auto-flow: column改变元素排列方向，配合grid-row控制行位置，无需手动设置列属性就能满足需求，具体实现如下：

1. Grid容器核心配置 #

给容器加上这几个关键属性：

.grid {
  height: 300px;
  width: 300px;
  display: grid;
  border: 1px solid red;
  /* 让元素优先按列排列，这是实现自动均分的关键 */
  grid-auto-flow: column;
  /* 每行高度均分容器高度，可根据需求调整 */
  grid-auto-rows: 1fr;
}

2. 元素仅需设置grid-row #

每个元素只需要指定grid-row，不用管列的设置：

• 像元素A这种单行独有的元素，Grid会自动让它占满整行宽度；
• 元素B（跨2-4行）和元素C（在第3行）重叠时，会自动在第3行均分列空间；
• D/E/F都在第6行，自然会分成三列各占1/3宽度。

完整可运行代码 #

CSS

.grid {
  height: 300px;
  width: 300px;
  display: grid;
  border: 1px solid red;
  grid-auto-flow: column;
  grid-auto-rows: 1fr;
}

.item {
  border: 1px solid teal;
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-a { grid-row: 1; }
.item-b { grid-row: 2 / 4; }
.item-c { grid-row: 3; }
.item-d { grid-row: 6; }
.item-e { grid-row: 6; }
.item-f { grid-row: 6; }

HTML

<div class="grid">
  <div class="item item-a">a</div>
  <div class="item item-b">b</div>
  <div class="item item-c">c</div>
  <div class="item item-d">d</div>
  <div class="item item-e">e</div>
  <div class="item item-f">f</div>
</div>

原理说明 #

• grid-auto-flow: column把Grid默认的“先排满行再换行”逻辑改成了“先排满列再换列”，元素会根据grid-row指定的位置自动填充到对应行的列中；
• 同一行存在多个元素时，它们会自动平分该行的宽度；只有单个元素时，自然占满整行；
• 后续增减元素，只需要修改元素的grid-row属性，其他元素会自动调整列位置，完全符合你“无需手动设置grid-column”的要求。

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