如何解决修改CSS Grid的grid-row-end后行折叠问题？

问题描述 #

我想将网格中的“item c”向下延伸一行，于是修改.c3类的grid-row-end属性从3改为4，但修改后中间行出现了折叠现象，请问如何修复？

原始代码 #

HTML #

<h1>Grid 3 Layering Grid Items</h1>
<p>demonstrate that grid items can overlap each other.</p>
<div class="grid3 container">
  <div class="box a3">item a</div>
  <div class="box b3">item b</div>
  <div class="box c3">item c</div>
  <div class="box d3">item d</div>
  <div class="box e3">item e</div>
  <div class="box f3">item f</div>
</div>

CSS #

.box {
  border-radius: 5px;
  padding: 20px;
}

.grid3 {
  font-size: 150%;
  background-color: lightgray;
  grid-gap: 10px;
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px;
}

.a3 {
  background-color: rgba(0, 255, 255, 0.5);
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 3;
}

.b3 {
  background-color: greenyellow;
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;
}

.c3 {
  background-color: rgba(255, 165, 0, 0.5);
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3; /* 修改为4后出现行折叠 */
}

.d3 {
  background-color: rgba(255, 0, 0, 0.5);
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
}

.e3 {
  background-color: rgba(255, 105, 180, 0.5);
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
}
.f3 {
  background-color: rgba(160, 32, 240, 0.5);
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 20;
}

问题原因 #

核心原因是CSS Grid的隐式行轨道高度计算逻辑：
当你将.c3的grid-row-end改为4后，所有涉及第2行（行线2到3）的网格项目（.d3、.f3、.c3）都同时跨越了第2、3行，导致第2行轨道没有任何专属内容支撑高度。Grid的隐式轨道默认高度为auto，若没有内容贡献高度，就会被压缩至0，表现为“行折叠”。

修复方案 #

方案1：显式定义网格行轨道高度（推荐） #

在.grid3中添加grid-template-rows属性，明确指定每一行的高度，确保轨道即使没有专属内容也能保持设定高度：

.grid3 {
  /* 原有属性保留 */
  grid-template-rows: auto auto auto; /* 或指定具体高度如100px */
}

方案2：添加占位项目强制行高度 #

在网格容器内添加一个空的占位项目，专门占据第2行的全部列，强制该行保持高度：

修改后的HTML

<h1>Grid 3 Layering Grid Items</h1>
<p>demonstrate that grid items can overlap each other.</p>
<div class="grid3 container">
  <div class="box a3">item a</div>
  <div class="box b3">item b</div>
  <div class="box c3">item c</div>
  <div class="box d3">item d</div>
  <div class="box e3">item e</div>
  <div class="box f3">item f</div>
  <div class="box placeholder"></div> <!-- 新增占位项 -->
</div>

新增CSS

.placeholder {
  grid-row: 2;
  grid-column: 1/-1;
  visibility: hidden; /* 不显示但占据空间 */
}

最终修改后的CSS（方案1示例） #

.box {
  border-radius: 5px;
  padding: 20px;
}

.grid3 {
  font-size: 150%;
  background-color: lightgray;
  grid-gap: 10px;
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px;
  grid-template-rows: auto auto auto; /* 新增行定义 */
}

.a3 {
  background-color: rgba(0, 255, 255, 0.5);
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 3;
}

.b3 {
  background-color: greenyellow;
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 1;
  grid-row-end: 2;
}

.c3 {
  background-color: rgba(255, 165, 0, 0.5);
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 4; /* 修改后的行范围 */
}

.d3 {
  background-color: rgba(255, 0, 0, 0.5);
  grid-column-start: 2;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
}

.e3 {
  background-color: rgba(255, 105, 180, 0.5);
  grid-column-start: 1;
  grid-column-end: 6;
  grid-row-start: 3;
  grid-row-end: 4;
}
.f3 {
  background-color: rgba(160, 32, 240, 0.5);
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 4;
  z-index: 20;
}

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