CSS Masonry 瀑布流原生佈局教學：不靠 JavaScript 也能做出 Pinterest 排版
身為前端工程師，我對瀑布流排版一直又愛又恨。愛它的視覺效果，恨的是每次都得靠 JavaScript 套件才能實現。不過好消息是，CSS 原生的 Masonry Layout 終於來了！今天就帶大家一起用純 CSS 做出漂亮的瀑布流佈局。
什麼是 Masonry 瀑布流佈局
如果你有用過 Pinterest，那你一定對瀑布流排版不陌生。它就是那種卡片高度不一、但會像瀑布一樣自然往下填滿空隙的佈局方式。以前要做這種效果，不是用 Masonry.js 就是得靠 CSS columns（但 columns 的排列順序是垂直的，很多時候不符合需求）。
CSS Masonry Layout 是 CSS Grid Level 3 規範中的新功能，讓你可以直接在 Grid 容器上宣告瀑布流排列，不需要任何 JavaScript。這對效能來說是一大利多，因為少了 JavaScript 的運算跟 DOM 操作，頁面載入速度自然就快了。
瀏覽器支援現況與 Polyfill
截至 2026 年初，Firefox 已經完整支援 CSS Masonry，Chrome 跟 Edge 也在最近幾個版本加入了支援（需要開啟 flag 或使用 Canary 版本）。Safari 的支援度也在持續改善中。
對於還沒支援的瀏覽器，你可以用 @supports 來做漸進增強：偵測到支援 Masonry 的就用原生方案，不支援的就 fallback 到一般的 Grid 排版。如果你之前有研究過 CSS @layer 的層疊管理，這種漸進增強的概念應該不陌生。
基本語法：grid-template-rows: masonry
核心語法其實超級簡單，就是在 Grid 容器上加一行：
.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: masonry; gap: 16px; }
沒錯，就這麼一行 grid-template-rows: masonry，瀑布流就搞定了。你也可以反過來用 grid-template-columns: masonry，這樣瀑布流的方向就會變成水平的。
另一個重要的屬性是 masonry-auto-flow，它決定了元素填入的邏輯。預設是 pack，會盡量填滿最短的那一欄；如果設成 next，元素就會依照 DOM 順序依次排列，不會跳欄。
實戰教學：從零開始建立瀑布流
好，廢話不多說，直接來動手做。
Step 1：HTML 結構。準備一個容器跟一堆子元素就好，每個子元素的高度可以不一樣。
Step 2：基本 CSS。設定 Grid 容器加上 masonry。使用 repeat(auto-fill, minmax(250px, 1fr)) 搭配 grid-template-rows: masonry 跟 gap: 20px 就能搞定基本排版。
Step 3：美化卡片。加點圓角、陰影跟 padding，讓卡片好看一點。你還可以結合 CSS @property 的漸層動畫，讓卡片 hover 時有炫酷的漸層效果。
Step 4：加入圖片。在卡片裡放圖片的時候，記得設定 object-fit: cover，避免圖片變形。然後圖片的高度就讓它自然撐開就好，Masonry 會自動幫你處理排列。
響應式瀑布流設計技巧
瀑布流在不同螢幕尺寸下的表現很重要。我習慣用 repeat(auto-fill, minmax(250px, 1fr)) 來自動調整欄數，這樣在手機上可能就一欄，平板兩欄，桌機三四欄。
但有個小細節要注意：當欄數變少的時候，原本在右邊欄位的元素會被擠到下面去，排列順序可能跟你預期的不同。如果你的內容有時間順序性（像是動態牆），這點要特別留意。
另外，搭配 Container Queries 使用效果更好。你可以根據容器寬度而不是 viewport 寬度來決定欄數，這在元件化的架構裡超級實用。之前寫的 Tailwind CSS v4 Container Queries 教學裡有更詳細的說明。
進階技巧與動畫效果整合
單純的瀑布流可能看起來有點無聊，加點動畫就會生動很多。我最常用的做法是搭配 @keyframes 跟 animation-delay，讓卡片依序淡入。
具體作法是用 CSS 自訂屬性 --index 來控制每張卡片的延遲時間。然後在 HTML 上用 inline style 設定每張卡片的 index，或者更優雅的做法是用 :nth-child() 搭配 CSS 計算。
另一個進階用法是結合 Intersection Observer 做 lazy loading——當卡片進入 viewport 才觸發動畫跟載入圖片。這對瀑布流這種通常有大量圖片的頁面來說，效能提升非常明顯。
原生 CSS vs JavaScript 方案比較
最後來比較一下原生 CSS Masonry 跟傳統 JavaScript 方案的優缺點：
效能方面，CSS 原生方案完勝。不需要等 JavaScript 載入跟執行，不會有 layout shift 的問題，也不需要監聽 resize 事件重新計算。
功能方面，JavaScript 方案還是比較豐富。像 Masonry.js 支援排序、篩選、動態新增元素等功能，這些純 CSS 目前還做不到。
瀏覽器支援，JavaScript 方案目前還是最安全的選擇。但如果你的目標用戶主要用 Chrome 或 Firefox，原生 CSS 已經可以上了。
我個人的建議是：新專案直接用原生 CSS Masonry 搭配 @supports 做漸進增強，舊專案如果沒有急迫性就先維持現狀。如果你對更多 CSS 新功能有興趣，也推薦看看 CSS Anchor Positioning 教學，一樣是原生取代 JavaScript 的好東西。前端的世界就是這樣，不斷有新東西出來讓我們的工作變得更簡單，持續學習才不會被淘汰啊！