CSS 終于原生支持瀑布流布局了！
你有沒有注意過，小紅書、淘寶等平臺上那種高低錯(cuò)落、緊密排列的內(nèi)容墻？
圖片
這種布局叫做瀑布流布局。像圖文列表、相冊展示、電商商品頁這些地方，都特別愛用。
不過，過去如果你想用 CSS 實(shí)現(xiàn)這個(gè)效果，基本都得走些“旁門左道”：要么引入 Masonry.js 這類 JavaScript 插件，要么拿 CSS Grid 或 Flexbox 搞些變通寫法。哪種都不輕松，出了問題還挺難查。
但現(xiàn)在，好消息來了——CSS 原生支持瀑布流布局了！
只需要加上一行 display: masonry，瀏覽器就能自動幫你排好那些“不規(guī)整”的元素。不用額外的庫，也不用自己算高度，代碼更簡單，性能也更好。
接下來我們就聊聊這個(gè)新特性是怎么來的？怎么用？瀏覽器支持情況怎么樣？
過去怎么實(shí)現(xiàn)瀑布流？
用 JS 插件，比如 Masonry.js、Isotope，或者用 Grid/Flexbox 做“偽瀑布流”是過去的主流方案。
這些方式雖然能實(shí)現(xiàn)效果，但都存在一些問題：
- 要引入額外的 JS 庫，增加加載體積；
- 響應(yīng)式布局調(diào)整時(shí)要重新觸發(fā) JS 計(jì)算；
- 寫法復(fù)雜，容易出錯(cuò)或有兼容性問題。
于是，很多開發(fā)者一直在呼吁：CSS 能不能直接支持瀑布流布局？
CSS Masonry 的進(jìn)化史
2017 - 2020：呼聲初起
從 2017 年起，社區(qū)里就有不少開發(fā)者在 W3C GitHub 提案、issue 區(qū)呼吁 CSS 能原生支持 Masonry。那時(shí)候 Grid 剛火不久，但也搞不定這種不規(guī)則的“磚墻式”排布。
2020 - 2024：標(biāo)準(zhǔn)化爭論
2020 年，CSS 工作組開始在 Grid Level 3 中正式探討 Masonry 語法。很快，各大瀏覽器廠商也加入討論：
- Apple/WebKit 認(rèn)為 Masonry 是 Grid 的一種變體，主張寫法沿用
grid-template-columns: masonry； - Google/Chromium 認(rèn)為它本質(zhì)上與 Grid 不同，主張使用
display: masonry作為新的布局類型。
爭論持續(xù)了幾年，最終折中的結(jié)果是：兩個(gè)寫法都可以支持。
2025：實(shí)驗(yàn)性支持上線
2025 年，Chrome 和 Edge 140 版本開始提供實(shí)驗(yàn)性支持：
- 可以用
display: masonry直接實(shí)現(xiàn)瀑布流； - 也可以在 Grid 中使用
grid-template-columns: masonry； - 目前都需要手動在
chrome://flags中開啟 Masonry Layout 選項(xiàng)。
Firefox 和 Safari 也在積極跟進(jìn)中，預(yù)計(jì) 2026 年將會穩(wěn)定支持。
原生 CSS Masonry 有哪些優(yōu)勢？
對比以往的 JavaScript 實(shí)現(xiàn)，原生 CSS Masonry 有不少優(yōu)勢：
- 更高的性能：瀏覽器引擎直接計(jì)算布局，省去了 JS 操作 DOM 的性能開銷；
- 響應(yīng)式更輕松：窗口大小改變時(shí)，瀏覽器自動處理重排，不需要再跑 JS；
- 更少的代碼：不用引入庫，不需要監(jiān)聽 resize，不需要手寫復(fù)雜的布局邏輯；
- 加載更快：CSS 渲染無需等 JS 執(zhí)行，頁面打開即可展示完整布局。
Chrome 團(tuán)隊(duì)測試發(fā)現(xiàn)，在包含 100 個(gè)元素的瀑布流中，原生 Masonry 比 JS 方案加載速度快了大約 40%。
Masonry 的語法長什么樣？
目前有兩種寫法，對應(yīng)的是前面提到的兩種思路：一種是把 Masonry 當(dāng)作新的布局類型，另一種是把它作為 Grid 的擴(kuò)展。
寫法一：display: masonry（目前主流，推薦）
這是現(xiàn)在 Chrome 先支持的寫法，也是最簡單直接的一種。像這樣寫：
.masonry {
display: masonry;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}你可能注意到了，這里雖然用了 display: masonry，但 grid-template-columns 依然能用。這是因?yàn)?Masonry 繼承了部分 Grid 的語法，用法也比較類似，基本不需要重新學(xué)習(xí)。
寫法二：在 Grid 中使用 masonry 值
還有一種思路，是把 Masonry 融進(jìn) Grid 的語法體系里：
.masonry {
display: grid;
grid-template-columns: masonry;
}這種寫法目前還在討論中，還沒正式定下來，未來有可能成為標(biāo)準(zhǔn)，但現(xiàn)在主流瀏覽器還沒支持。
怎么在瀏覽器中啟用 Masonry？
目前這個(gè)特性還屬于實(shí)驗(yàn)階段，默認(rèn)是關(guān)著的，需要手動開啟：
- 使用 Chrome 或 Edge 140 及以上版本；
- 在地址欄輸入
chrome://flags； - 搜索「CSS Masonry Layout」；
- 啟用這個(gè)功能，重啟瀏覽器就生效了。
基礎(chǔ)用法
先來個(gè)最常見的場景：橫向排列、列寬自適應(yīng)、高度不固定的卡片流。
.masonry {
display: masonry;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}這段代碼會生成一個(gè)響應(yīng)式的 Masonry 容器，每列最小 200px，瀏覽器會根據(jù)容器寬度自動安排放幾列。
圖片
行方向 Masonry 布局
默認(rèn) Masonry 是按列來的，但其實(shí)它也支持橫向排列（即按行 Masonry）。
只要加上 masonry-direction: row 就行：
.masonry {
display: masonry;
masonry-direction: row;
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
gap: 16px;
}
圖片
這在一些橫向滾動的內(nèi)容流、時(shí)間軸樣式中會很有用。
不指定列寬也能自動布局
一個(gè)很貼心的點(diǎn)是：你可以不寫 grid-template-columns，瀏覽器也能自己安排列數(shù)。
.masonry {
display: masonry;
gap: 16px;
/* 會自動創(chuàng)建多列，不需要手動指定 */
}這在快速搭頁面或者原型階段非常方便，不需要先想列數(shù)、也不用定寬度，效果就已經(jīng)很不錯(cuò)了。
支持跨列元素
跟 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; /* 占滿整個(gè)寬度 */
}這個(gè)特性對于制作博客、新聞頁面、突出重點(diǎn)內(nèi)容非常實(shí)用。
簡寫屬性：masonry
如果你覺得 grid-template-columns + masonry-direction 太啰嗦，也可以用官方提出的 masonry 簡寫：
.masonry {
display: masonry;
masonry: repeat(3, 200px) column;
}等價(jià)于：
.masonry {
display: masonry;
masonry-direction: column;
grid-template-columns: repeat(3, 200px);
}瀏覽器支持現(xiàn)狀
瀏覽器 | 支持情況 | 說明 |
Chrome / Edge 140+ | 實(shí)驗(yàn)性支持 | 需要在 |
Firefox Nightly | 實(shí)驗(yàn)性支持 | 需要手動啟用 |
Safari / WebKit | 開發(fā)中 | 標(biāo)準(zhǔn)參與中，尚未實(shí)現(xiàn) |
雖然還不能直接上線生產(chǎn)環(huán)境，但這已經(jīng)是值得關(guān)注和試水的階段了。
寫在最后
從 table 到 float，從 flex 到 grid，再到現(xiàn)在的 masonry，CSS 布局能力的每一次演進(jìn)，都是在幫我們把“樣式”這件事做得更優(yōu)雅、更少依賴、更易維護(hù)。
CSS Masonry 的到來，不僅解決了一個(gè)老大難的問題，更意味著我們能用更少的代碼、更優(yōu)的性能，實(shí)現(xiàn)更豐富的頁面表現(xiàn)。
雖然現(xiàn)在它還在實(shí)驗(yàn)階段，但相信不久的將來，瀑布流布局會像 flex 一樣，成為前端開發(fā)者的標(biāo)配工具。
我們等了它很多年，現(xiàn)在，它終于來了。
