如何用CSS Grid实现多元素同列且.col2跨所有行（不可修改HTML）

嘿，这个需求用CSS Grid的原生特性就能完美搞定，完全不用修改HTML结构，也不需要硬写一堆固定行数，适配.col1数量不固定的场景超灵活！

核心思路 #

利用Grid的隐式行自动创建和行范围定位特性，让.col1自动排列在第一列，.col2直接占据第二列的全部行高。

完整代码实现 #

首先给容器设置Grid基础布局：

.type-a {
  display: grid;
  grid-template-columns: auto 1fr; /* 第一列自适应内容宽度，第二列占满剩余空间 */
  gap: 1.5rem; /* 可选，添加列间距提升美观度 */
}

然后让所有.col1固定在第一列：

.col1 {
  grid-column: 1; /* 强制所有.col1元素放在第一列 */
}

这里Grid会自动根据.col1的数量创建对应的隐式行，不管有多少个.col1，都会整齐排列在第一列的不同行里，完全不用手动指定行数。

最后让.col2横跨第二列的全部行：

.col2 {
  grid-column: 2; /* 固定在第二列 */
  grid-row: 1 / -1; /* 从第一行起始，一直延伸到网格的最后一行 */
}

这里的-1是Grid的特殊关键字，代表网格的最后一行，不管.col1生成了多少行，.col2都会自动拉满整个第二列的高度，完美适配动态行数的场景。

效果验证 #

哪怕你的HTML结构是这样（不管.col1穿插在什么位置）：

<div class="type-a">
  <div class="col1">第一行左侧内容</div>
  <div class="col2">我是横跨所有行的右侧内容</div>
  <div class="col1">第二行左侧内容</div>
  <div class="col1">第三行左侧内容</div>
</div>

最终布局都会是：所有.col1整齐排列在第一列，.col2在第二列占据从第一行到最后一行的全部空间，完全符合你的需求。

内容的提问来源于stack exchange，提问作者Antônio Pinto