如何实现左侧列优先填充的动态CSS Grid布局

针对你需要的先填满左侧列，再从右侧列顶部开始排列的双列布局，且要适配元素动态增删的场景，以下是两种可靠的实现方案：

方案1：CSS Columns布局（推荐，无需预设行数） #

Columns是最贴合需求的原生布局方案，自动按列优先顺序排列元素，完全适配动态增删场景。

修改后的代码 #

.grid-container {
  columns: 2; /* 指定双列 */
  column-gap: 0; /* 可选：消除列间距，按需调整 */
}

.grid-item {
  break-inside: avoid; /* 防止元素被拆分到两列 */
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
  margin: 0; /* 避免默认margin导致的额外间距 */
}

<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
  <div class="grid-item">E</div>
  <div class="grid-item">F</div>
  <div class="grid-item">G</div>
  <div class="grid-item">H</div>
  <div class="grid-item">I</div>
  <!-- 动态增删元素时，布局会自动调整 -->
</div>

核心说明 #

• columns: 2直接定义双列，浏览器会根据容器高度自动分配元素到左右列，优先填满左列。
• break-inside: avoid确保单个元素不会被分割到两列，保持布局完整性。
• 新增或删除元素后，布局会自动重新计算，不会出现失衡或横向排列的问题。

方案2：CSS Grid布局（精确控制列宽行高） #

如果需要更精细的网格控制，可采用Grid布局实现列优先排列：

修改后的代码 #

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 固定双列宽度 */
  grid-auto-flow: column; /* 设置列优先排列 */
  grid-auto-rows: auto; /* 自动根据内容生成行高 */
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

核心说明 #

• grid-template-columns: 1fr 1fr固定双列，避免自动新增列。
• grid-auto-flow: column让元素先填满左列的所有行，再从右列顶部开始排列，完全匹配你需要的效果。
• 动态增删元素时，Grid会自动调整行的数量，保持布局结构稳定。

内容的提问来源于stack exchange，提问作者Barry Dewey-Robertson