如何让Grid左侧项自动填充剩余行？无需固定行跨度技巧

我想要实现第二个Grid的效果——让左侧列的Grid项填满所有可用行，但有两个限制：

• 不能修改HTML结构（因为是移动端优先方案，所以选用Grid布局）
• 右侧列的项数量不确定（最多100个）

目前我用的是grid-row:2/99这种硬编码行号的技巧，想问有没有其他更合理的方法？另外，明明已经有现成的行，为什么不能直接让它跨到最后一行？

解决方案：用grid-row: 2 / -1替代硬编码行号 #

直接把99换成-1就行，-1是CSS Grid的内置特殊值，专门指代网格的最后一条线，不管右侧自动生成了多少行，它都能精准让左侧项从第2行一直跨到最后一行，完全适配不确定的项数量：

.grid-item--fix {
  grid-row: 2 / -1;
}

为什么之前的写法有局限？ #

你的Grid是自动生成行的（没显式设置grid-template-rows），默认情况下，Grid只会给每个项分配一行空间。而你之前用99属于"猜最大值"的取巧写法，虽然能覆盖最多100项的场景，但不够优雅。而-1是标准语法里用来定位最后一条网格线的，不管自动生成多少行，它都能准确对应到最后一行的结束位置，这才是符合规范的写法。

完整可运行代码 #

.grid {
  display: grid;
  background: lightgray;
  border: 1px solid red;
  grid-template-columns: 3fr 1fr;
}
.grid-item {
  border: 1px solid red;
  background: #fff;
}
.grid-item:nth-child(1) {
  grid-column: 1/-1;
}
.grid-item:nth-child(2) {
  height: 125px;
}
.grid-item:nth-child(3) {
  height: 50px;
}
.grid-item:nth-child(n+3) {
  grid-column: 2/-1;
}

/* 优化后的写法 */
.grid-item--fix {
  grid-row: 2 / -1;
}

<div class="grid">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
</div>

<hr>

<div class="grid">
  <div class="grid-item">Item 1</div>
  <div class="grid-item grid-item--fix">Item 2 bis</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
</div>

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