如何在Grid布局中实现单列独占或限定列范围排布？

完全可以实现你提出的两种Grid布局效果，以下是具体解决方案：

一、未知行数下让指定元素独占整列 #

你之前尝试grid-row: 1 / -1无效，是因为未配合正确的列定位。只需给目标元素同时指定列范围和跨所有行，就能实现自适应行数的整列独占：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

.grid div {
  background: red;
}

.left {
  /* 锁定第1列 */
  grid-column: 1;
  /* 从第1行延伸到最后一行，行数随元素数量自动变化 */
  grid-row: 1 / -1;
}

无论后续元素数量如何增减，.left都会自动占据第1列的所有行，高度自适应网格总高度。

二、让其余元素仅在选定列范围排布（单个单元） #

通过选择器排除目标元素，即可限制其余元素在指定列内逐个占用单个网格单元：

由于.left已占据第1列的所有行，网格会自动将剩余元素填充到第2、3列区域，默认就能实现每个元素占单个单元的效果。如果出现排列间隙，可给容器添加grid-auto-flow: dense让网格自动填充空白：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  /* 自动填充网格空白位置 */
  grid-auto-flow: dense;
}

.grid div:not(.left) {
  /* 强制每个元素仅占用1列宽度 */
  grid-column: span 1;
}

完整可运行代码 #

CSS #

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  grid-auto-flow: dense;
}

.grid div {
  background: red;
  padding: 1rem;
}

.left {
  grid-column: 1;
  grid-row: 1 / -1;
}

.grid div:not(.left) {
  grid-column: span 1;
}

HTML #

<div class="grid">
  <div class="left">Column</div>
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
  <div>F</div>
  <div>G</div>
  <div>H</div>
  <div>I</div>
  <div>J</div>
</div>

该方案无需预先确定行数，完全根据元素数量自适应调整，同时满足两种布局需求。

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