CSS 终于原生支持瀑布流布局了！

你有没有注意过，小红书、淘宝等平台上那种高低错落、紧密排列的内容墙？

这种布局叫做瀑布流布局。像图文列表、相册展示、电商商品页这些地方，都特别爱用。

不过，过去如果你想用 CSS 实现这个效果，基本都得走些“旁门左道”：要么引入 Masonry.js 这类 JavaScript 插件，要么拿 CSS Grid 或 Flexbox 搞些变通写法。哪种都不轻松，出了问题还挺难查。

但现在，好消息来了——CSS 原生支持瀑布流布局了！

只需要加上一行 display: masonry，浏览器就能自动帮你排好那些“不规整”的元素。不用额外的库，也不用自己算高度，代码更简单，性能也更好。

接下来我们就聊聊这个新特性是怎么来的？怎么用？浏览器支持情况怎么样？

过去怎么实现瀑布流？

用 JS 插件，比如 Masonry.js、Isotope，或者用 Grid/Flexbox 做“伪瀑布流”是过去的主流方案。

这些方式虽然能实现效果，但都存在一些问题：

• 要引入额外的 JS 库，增加加载体积；
• 响应式布局调整时要重新触发 JS 计算；
• 写法复杂，容易出错或有兼容性问题。

于是，很多开发者一直在呼吁：CSS 能不能直接支持瀑布流布局？

CSS Masonry 的进化史

2017 - 2020：呼声初起

从 2017 年起，社区里就有不少开发者在 W3C GitHub 提案、issue 区呼吁 CSS 能原生支持 Masonry。那时候 Grid 刚火不久，但也搞不定这种不规则的“砖墙式”排布。

2020 - 2024：标准化争论

2020 年，CSS 工作组开始在 Grid Level 3 中正式探讨 Masonry 语法。很快，各大浏览器厂商也加入讨论：

• Apple/WebKit 认为 Masonry 是 Grid 的一种变体，主张写法沿用 grid-template-columns: masonry；
• Google/Chromium 认为它本质上与 Grid 不同，主张使用 display: masonry 作为新的布局类型。

争论持续了几年，最终折中的结果是：两个写法都可以支持。

2025：实验性支持上线

2025 年，Chrome 和 Edge 140 版本开始提供实验性支持：

• 可以用 display: masonry 直接实现瀑布流；
• 也可以在 Grid 中使用 grid-template-columns: masonry；
• 目前都需要手动在 chrome://flags 中开启 Masonry Layout 选项。

Firefox 和 Safari 也在积极跟进中，预计 2026 年将会稳定支持。

原生 CSS Masonry 有哪些优势？

对比以往的 JavaScript 实现，原生 CSS Masonry 有不少优势：

• 更高的性能：浏览器引擎直接计算布局，省去了 JS 操作 DOM 的性能开销；
• 响应式更轻松：窗口大小改变时，浏览器自动处理重排，不需要再跑 JS；
• 更少的代码：不用引入库，不需要监听 resize，不需要手写复杂的布局逻辑；
• 加载更快：CSS 渲染无需等 JS 执行，页面打开即可展示完整布局。

Chrome 团队测试发现，在包含 100 个元素的瀑布流中，原生 Masonry 比 JS 方案加载速度快了大约 40%。

Masonry 的语法长什么样？

目前有两种写法，对应的是前面提到的两种思路：一种是把 Masonry 当作新的布局类型，另一种是把它作为 Grid 的扩展。

写法一：display: masonry（目前主流，推荐）

这是现在 Chrome 先支持的写法，也是最简单直接的一种。像这样写：

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

你可能注意到了，这里虽然用了 display: masonry，但 grid-template-columns 依然能用。这是因为 Masonry 继承了部分 Grid 的语法，用法也比较类似，基本不需要重新学习。

写法二：在 Grid 中使用 masonry 值

还有一种思路，是把 Masonry 融进 Grid 的语法体系里：

.masonry {
  display: grid;
  grid-template-columns: masonry;
}

这种写法目前还在讨论中，还没正式定下来，未来有可能成为标准，但现在主流浏览器还没支持。

怎么在浏览器中启用 Masonry？

目前这个特性还属于实验阶段，默认是关着的，需要手动开启：

1. 使用 Chrome 或 Edge 140 及以上版本；
2. 在地址栏输入 chrome://flags；
3. 搜索「CSS Masonry Layout」；
4. 启用这个功能，重启浏览器就生效了。

基础用法

先来个最常见的场景：横向排列、列宽自适应、高度不固定的卡片流。

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

这段代码会生成一个响应式的 Masonry 容器，每列最小 200px，浏览器会根据容器宽度自动安排放几列。

行方向 Masonry 布局

默认 Masonry 是按列来的，但其实它也支持横向排列（即按行 Masonry）。

只要加上 masonry-direction: row 就行：

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
  gap: 16px;
}

这在一些横向滚动的内容流、时间轴样式中会很有用。

不指定列宽也能自动布局

一个很贴心的点是：你可以不写 grid-template-columns，浏览器也能自己安排列数。

.masonry {
  display: masonry;
  gap: 16px;
  /* 会自动创建多列，不需要手动指定 */
}

这在快速搭页面或者原型阶段非常方便，不需要先想列数、也不用定宽度，效果就已经很不错了。

支持跨列元素

跟 CSS Grid 一样，Masonry 也支持让某些元素跨越多列或整行：

.masonry {
display: masonry;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 16px;
}

.featured-item {
grid-column: span 2; /* 跨越两列 */
}

.full-width {
grid-column: 1 / -1; /* 占满整个宽度 */
}

这个特性对于制作博客、新闻页面、突出重点内容非常实用。

简写属性：masonry

如果你觉得 grid-template-columns + masonry-direction 太啰嗦，也可以用官方提出的 masonry 简写：

.masonry {
  display: masonry;
  masonry: repeat(3, 200px) column;
}

等价于：

.masonry {
  display: masonry;
  masonry-direction: column;
  grid-template-columns: repeat(3, 200px);
}

浏览器支持现状

虽然还不能直接上线生产环境，但这已经是值得关注和试水的阶段了。

写在最后

从 table 到 float，从 flex 到 grid，再到现在的 masonry，CSS 布局能力的每一次演进，都是在帮我们把“样式”这件事做得更优雅、更少依赖、更易维护。

CSS Masonry 的到来，不仅解决了一个老大难的问题，更意味着我们能用更少的代码、更优的性能，实现更丰富的页面表现。

虽然现在它还在实验阶段，但相信不久的将来，瀑布流布局会像 flex 一样，成为前端开发者的标配工具。

我们等了它很多年，现在，它终于来了。