动态列布局需求：同宽异高卡片自动放入当前最短列

嘿，这个问题我之前也研究过！要实现这种「把新卡片自动塞进当前最短列」的同宽瀑布流，纯CSS确实有点 tricky，但还是有几个方案可以试试：

方案1：CSS Grid Masonry（最贴合需求，实验性但可用） #

CSS Grid新增的masonry布局模式正好就是为这种场景设计的——它会自动把后续元素放到当前高度最低的列里，完美支持动态列数和同宽卡片。

代码示例：

.card-container {
  display: grid;
  /* 动态控制列数：最小占25%宽度（对应4列），屏幕变窄时自动减少列数，最少1列 */
  grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
  /* 启用masonry行布局，核心就是这一行 */
  grid-template-rows: masonry;
  /* 可选：自动填充前面的空隙，避免留白 */
  grid-auto-flow: row dense;
  gap: 0; /* 和你的原代码保持一致，不需要间距就设为0 */
}

.card {
  margin: 0;
  /* 不用再手动设width了，Grid会自动分配列宽 */
}

.a { background-color: red; height: 32px; }
.b { background-color: yellow; height: 80px; }
.c { background-color: green; height: 32px; }
.d { background-color: blue; height: 32px; }
.e { background-color: gray; height: 32px; }

对应的HTML只需要把卡片放进容器里：

<div class="card-container">
  <div class="card a">a</div>
  <div class="card b">b</div>
  <div class="card c">c</div>
  <div class="card d">d</div>
  <div class="card e">e</div>
</div>

⚠️ 注意：这个特性目前还处于实验阶段，Chrome/Edge需要开启chrome://flags/#enable-experimental-web-platform-features，Firefox可以在about:config里打开layout.css.grid-template-rows-masonry.enabled，Safari暂时还不支持。如果你的项目需要兼容所有浏览器，这个方案暂时不太适合。

方案2：CSS Columns（兼容性拉满，但顺序不符合预期） #

如果必须要兼容所有浏览器，CSS Columns可以实现同宽瀑布流，但有个小缺点：它是垂直优先排列的（先填满第一列，再填第二列），最终顺序会是a→c→e→b→d，和你期望的水平顺序不一样，但胜在所有现代浏览器都支持。

代码很简单：

.card-container {
  /* 动态列宽：最小25%宽度，自动适配屏幕 */
  column-width: 25%;
  column-gap: 0;
}

.card {
  break-inside: avoid; /* 防止卡片被拆分到两列 */
  margin: 0;
  width: 100%; /* 占满列宽 */
}

为什么Flexbox搞不定？ #

你说尝试过Flexbox无效是对的——Flexbox的flex-wrap: wrap是行优先的，每行的高度由该行最高的元素决定，它没办法自动把后续元素塞进上一行的空隙里，所以确实实现不了你要的「找最短列填充」逻辑。

最后说句实在话 #

如果需要完全兼容所有浏览器，同时严格遵循你要的水平顺序填充逻辑，目前纯CSS还没有完美的解决方案。这种情况下，其实Masonry库是个不错的选择——它虽然常被用来处理异宽卡片，但同宽场景下也能用，而且体积很小，不会给页面带来太多负担。

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