如何用纯CSS实现先横向后纵向的报纸式异尺寸盒子布局？

可以用纯CSS实现，推荐两种实用方案：

方案一：CSS Grid + 自动空隙填充 #

通过Grid固定列数，结合grid-auto-flow: row dense让元素按左到右、从上到下的顺序排列，同时自动填充短元素下方的空隙，实现紧凑布局。

核心代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 300px); /* 匹配需求的3列宽度 */
  grid-auto-flow: row dense; /* 关键属性：自动填充空隙 */
  gap: 20px; /* 可选，控制元素间间距 */
  max-width: 960px;
  width: 100%;
}
.box {
  height: fit-content;
}

这个方案兼容性好，覆盖绝大多数现代浏览器，完全匹配你的布局需求。

方案二：CSS原生Masonry布局（Chrome 117+） #

如果目标浏览器支持最新CSS特性，原生Masonry布局是更语义化的选择，它专门针对不规则高度元素的紧凑排列设计，默认就是行优先（左到右）的排列顺序。

核心代码：

.container {
  display: grid;
  grid-template-columns: repeat(3, 300px);
  grid-template-rows: masonry; /* 启用原生Masonry */
  gap: 20px;
  max-width: 960px;
  width: 100%;
}
.box {
  break-inside: avoid;
}

为什么原有方案无法满足需求？ #

• Column模块：采用列优先排列逻辑，先填满第一列再切换到下一列，不符合左到右的顺序要求。
• Flexbox换行：虽然是行优先，但Flex无法跨行填充空隙，短元素下方的空白无法被后续元素利用，导致布局松散。

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