如何用纯CSS实现元素垂直排列的动态列布局？

可以仅用CSS实现这种需求，核心是使用CSS多列布局（Multi-column Layout），它天然支持列优先的元素排列，并且会自动平衡列中的元素数量——当元素总数为偶数时两列均分，奇数时第一列多一个元素。

解决方案代码 #

CSS #

.container {
  /* 设置为2列 */
  column-count: 2;
  /* 让列高度尽可能平衡，自动分配元素数量 */
  column-fill: balance;
  /* 可选：设置列间距 */
  column-gap: 1rem;
}

.item {
  /* 避免元素被跨列分割 */
  break-inside: avoid;
  border: 1px dotted black;
  margin-bottom: 0.5rem;
}

HTML #

<!-- 10个元素的情况 -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

<!-- 11个元素的情况 -->
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
</div>

原理说明 #

• column-count: 2：直接将容器划分为2列。
• column-fill: balance：这是默认值（部分浏览器需显式设置），浏览器会自动计算分配元素，让两列元素数量尽可能均衡——偶数总数时各占一半，奇数总数时前一列多一个。
• break-inside: avoid：防止单个元素被分割到两列，保证每个item的完整性。

为什么之前的Grid写法不生效？ #

你之前用的Grid布局默认是行优先排列（grid-auto-flow: row），元素会先填满一行再换行，呈现横向排列效果。如果想用Grid实现类似效果，需要改为列优先，但需手动计算行数，灵活性远不如多列布局：

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* 改为列优先排列 */
  grid-auto-flow: column;
  /* 需手动设置行数，无法动态适配元素数量 */
  grid-template-rows: repeat(6, max-content);
}

这种写法需要提前知晓元素总数来设置行数，无法像多列布局那样自动适配，因此多列布局是更优方案。

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