如何实现无垂直空白的动态高度元素流式布局？

我需要实现一个从左到右排列的动态元素列表，元素高度各不相同。换行后的元素需紧贴对应上方元素的底部，消除网格布局产生的垂直空白。

预期效果 #

我尝试使用flex和grid布局，但它们都会将行高统一为该行最高元素的高度。以下是我当前的实现代码：

CSS代码 #

*,
body {
  margin: 0;
  padding: 0;
}

main {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 1rem;
  width: 100vw;
}

.box {
  background-color: red;
  padding: 1rem;
}

.short {
  height: 5rem;
}

.middle {
  height: 8rem;
}

.tall {
  height: 12rem;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>FlexBox</title>
</head>

<body>
  <main>
    <div class="box tall">1</div>
    <div class="box short">2</div>
    <div class="box middle">3</div>
    <div class="box short">4</div>
    <div class="box tall">5</div>
    <div class="box short">6</div>
    <div class="box middle">7</div>
    <div class="box short">8</div>
    <div class="box tall">9</div>
    <div class="box short">10</div>
    <div class="box middle">11</div>
    <div class="box short">12</div>
  </main>
</body>

</html>

当前效果 #

请问是否存在我遗漏的更简便解决方案？

解决方案 #

你要实现的是瀑布流布局，Flex和Grid的常规布局确实无法直接做到，因为它们都是基于行/列的统一高度/宽度。这里有几种简便的实现方式：

1. CSS多列布局（最简便的纯CSS方案）

直接利用CSS的多列特性，让元素自动按列填充，天然实现上元素底部紧贴下元素的效果：

main {
  columns: 4; /* 设置列数 */
  column-gap: 1rem; /* 列之间的间距 */
  width: 100vw;
}

.box {
  background-color: red;
  padding: 1rem;
  break-inside: avoid; /* 禁止元素被列分割 */
  margin-bottom: 1rem; /* 替代行间距，因为columns仅控制列间距 */
}

2. Grid布局优化（仅适合固定元素顺序场景）

如果需要严格保持元素的横向排列顺序，可以给Grid添加grid-auto-flow: dense，它会自动填充网格中的空白区域，但无法完全消除所有垂直空白，仅能优化部分场景：

main {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 用1fr保证列宽一致 */
  gap: 1rem;
  width: 100vw;
  grid-auto-flow: dense;
}

3. 轻量JS库（动态元素场景可选）

如果需要支持动态加载元素、拖拽排序等复杂交互，可以使用Masonry这类轻量瀑布流库，精准控制元素排布，但需要引入外部JS。

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