CSS Grid Lanes：Safari 原生瀑布流布局

瀑布流布局，也就是那種類似 Pinterest 的交錯式網格，任何尺寸的項目都能流入可用空間，這項技術靠著 JavaScript 函式庫、float 與 Flexbox 各種變通手法，已經在生產環境裡撐了十多年，而那些手法往往堪用，直到某天突然失靈。¹在 WWDC 2026 上，Apple 的 Safari 團隊為網頁帶來了一種原生的布局模式來實現它：CSS Grid Lanes。瀑布流這個模式並不新鮮，但能用三行程式碼產生它的一級 CSS display 類型，加上修正瀑布流長期以來 tab 順序與無障礙問題的 flow-tolerance 旋鈕，則是全新的。Grid Lanes 今天就能在 Safari 26.4 中使用，在其他瀏覽器中則藏在旗標之後。¹

TL;DR

• Grid Lanes 是一種介於 Grid 與 Flexbox 之間的全新 CSS 布局模式：它結構化一個軸向，讓另一個軸向自由發揮，將內容分散到多條 lane 中，形成緊密交錯的布局，同時保留每個項目的自然比例。¹
• 整件事只需三行：display: grid-lanes、帶有 fr 軌道的 grid-template-columns，以及 gap。把 grid-template-columns 換成 grid-template-rows，就能把瀑布流翻轉成磚牆。您只能選一個方向，不能兩個都選。¹
• 軌道尺寸沿用自 Grid：不等的 fr 比例、搭配 minmax() 的 auto-fill 以實現響應式欄數，以及窄寬交錯的重複模式。¹
• 項目使用您已經熟悉的 Grid 屬性：用 grid-column: span 2 加寬、明確指定欄位置，以及用 grid-template-columns: subgrid 把卡片內容折疊進父層布局。您控制欄的位置，而非列；列由 Grid Lanes 決定。¹
• flow-tolerance 是最關鍵的差異化所在。純粹的「最短欄」擺放可能讓 tab 順序與視覺順序呈鋸齒狀錯位，損害無障礙性。flow-tolerance（預設 1em）放寬最短欄規則，讓擺放更貼近閱讀順序。¹
• 可用性說得很坦白：Safari 26.4 今天就提供它，其他瀏覽器則用旗標把它擋住。Grid Lanes 尚未達到跨瀏覽器的正式可用（GA）。¹

Grid Lanes 介於 Grid 與 Flexbox 之間的位置

Safari 團隊的 Brandon 從頭打造一個 Grid Lanes 布局，從 3:39 開始。

每一種布局模式都回答相同的兩個問題：項目放在哪裡，以及它們能得到多少空間。¹Flexbox 與 Grid 的回答方式不同，而 Grid Lanes 正好落在兩者之間。

Flexbox 給您一個軸向，以及沿著它流動的單一 lane 項目；當項目換行時，它們會在所選方向上繼續流動，無論是列還是欄。¹Grid 給您兩個軸向，欄與列，並把項目放進這些軌道交會處的儲存格中。當項目的長寬比不同時，問題就會浮現：較矮的項目無法填滿儲存格，於是您會得到大片空白區域。¹對圖片而言，這留下三個糟糕的選項。把每張圖片拉伸去填滿儲存格，會使它變形；放大去填滿空間，圖片會溢出容器；裁切它，則可能丟失重要資訊。¹

Grid Lanes 化解了這股張力。如同議程所述：「它介於 Grid 與 Flex 之間。它不像 Grid 那樣跨兩個維度結構化，而是只結構化其中一個，讓另一個自由發揮。但又不像 Flex 那樣讓內容在單一 lane 中流動並沿頁面往下換行，Grid Lanes 把內容分散到多條 lane 之中。」¹項目會被逐一擺放，每一個都落到能讓它最靠近頂端的那一欄，這正是為什麼較早的項目坐得較高、較晚的項目則填補在下方。¹這套布局適用於任何內容，而不只是圖片：文字區塊會換行以適配它的欄，瀏覽器負責決定高度，而標題則能橫跨多欄以凸顯出來。¹

三行 CSS 實現原生瀑布流

這套作法從一個新的 display 類型開始，接著像 Grid 一樣定義軌道：

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

grid-template-columns 設定軌道的數量，以及每一條軌道的寬度。fr 單位（「fractional unit」，即分數單位）告訴瀏覽器把容器中的可用空間切成數份，因此 1fr 1fr 1fr 會產生三條等寬的欄，而 gap 加上間距的方式與在 Grid 中完全相同。¹要把瀑布流翻轉成磚牆，就把欄換成列：把 grid-template-columns 換成 grid-template-rows，項目就會橫向逐列流動，而不是縱向逐欄向下。唯一要注意的，用議程的話來說：「您只能選一個方向，不能兩個都選。」¹

這三行給您的控制力比看起來多。欄不必相等：中央那一欄可以佔用相鄰兩欄兩倍的空間。您也可以不自己固定欄數，而是讓瀏覽器決定，就和響應式 Grid 布局早已做到的一樣：

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

auto-fill 會建立盡可能多、能塞得下的欄，而 minmax() 則說明每一欄至少要 200 像素，但可以成長去填滿空間。¹您可以把同樣的概念再往前推一步，用窄欄與寬欄交錯的重複模式。Brandon 點出的甜頭是：「我最愛的，是用短短幾行 CSS 就能做到這麼多。」¹

用您熟悉的 Grid 屬性塑造個別項目

Grid Lanes 用 Grid 中早已存在的屬性來塑造項目。從一個有三條等寬欄的 grid-lanes 容器開始。要給某個項目更多空間，grid-column: span 2 會把它橫跨兩欄拉伸，而布局其餘部分則圍繞著它調整。¹您也可以精確擺放某個項目：設定它從第 2 欄開始並橫跨第 2 與第 3 欄。這項限制是刻意的：「您可以控制欄的位置，但不能控制列。列由 Grid Lanes 替您決定。」¹

subgrid 把巢狀元件的內容折疊進父層。一張橫跨兩欄的食譜卡片裡有一張圖片與一些文字，預設情況下它們不會參與 Grid Lanes 布局。在卡片上加入 display: grid-lanes 與 grid-template-columns: subgrid，「它的內容就會以各自獨立的項目身分加入父層布局」：圖片佔一欄，文字佔另一欄，各自依其內容調整尺寸。¹巢狀可以朝任一方向進行，無論是在 Grid Lanes 容器裡放一般網格，或者反過來，因為同一套工具與語法都能沿用。¹

flow-tolerance 旋鈕：無障礙的修正方案

接下來這部分讓 Grid Lanes 不只是更整潔的瀑布流。純粹的最短欄擺放在多數時候看起來很棒，但有時就是覺得不太對勁，而原因出在無障礙性。¹

想像同一列中有兩個高度幾乎相同的項目，其中項目 2 比項目 1 矮了幾像素。項目 2 下方的區域較靠近頂端，於是瀏覽器把下一個項目放在那裡，而項目 4 則填補第一欄。視覺上的結果是第一列從左讀到右、最後一列卻從右讀到左。如同議程所說：「tab 順序與內容視覺呈現之間的差異，會影響人們的無障礙體驗，並可能造成令人困惑的感受。」¹tab 順序遵循原始碼順序；鋸齒狀的視覺擺放打破了鍵盤與螢幕報讀器使用者所仰賴的對應關係。

flow-tolerance 就是放寬或收緊最短欄規則的旋鈕。¹開啟它之後，瀏覽器會針對每個新項目自問：「較高的那一欄是否小於較矮的那一欄加上 flow-tolerance？」¹如果落差在容差範圍內，項目就填入能讓擺放與閱讀順序保持一致的那一欄；一旦落差大到無法忽視，項目才落進真正較短的那一欄。預設值是 1em：

.gallery {
  display: grid-lanes;
  grid-template-columns: 1fr 1fr;
  flow-tolerance: 1em;
}

Apple 的建議是「嘗試不同的 flow-tolerance 值，找出最適合您內容的設定」。¹給予瀏覽器彈性的另一面，是結果偶爾會出乎您意料，而當這種情況發生時，Web Inspector 對 Grid Lanes 提供完整支援：開啟疊加層，您會得到欄與列的線條、投射在每個項目上的順序編號（讓您看清擺放究竟是怎麼發生的），以及項目之間繪出的間距。¹

重點整理

對前端開發者而言： - 用 display: grid-lanes、三條 fr 軌道與 gap，取代 JavaScript 瀑布流函式庫與 Flexbox 變通手法；並沿用您早已熟悉的 Grid 軌道尺寸工具（auto-fill、minmax()、不等的 fr）。¹ - 善用 grid-column: span N 與明確的欄位置擺放來凸顯項目，並用 grid-template-columns: subgrid 把巢狀卡片內容折疊進父層布局。¹

對重視無障礙的團隊而言： - 調整 flow-tolerance（預設 1em），讓視覺擺放貼合原始碼與 tab 順序，彌合鋸齒狀瀑布流擺放對鍵盤與螢幕報讀器使用者造成的落差。¹ - 用 Web Inspector 的 Grid Lanes 疊加層驗證擺放，它會把項目順序編號直接投射在布局之上。¹

對規劃推行的技術主管而言： - 把 Grid Lanes 視為「Safari 26.4 可用、他處需旗標、尚非跨瀏覽器 GA」；以漸進增強的方式推出它，並為仍藏在旗標後的瀏覽器準備優雅的後備方案。¹

FAQ

什麼是 CSS Grid Lanes？

CSS Grid Lanes 是 Safari 團隊在 WWDC 2026 上推出的一種全新布局模式，用於原生打造瀑布流風格的布局。它介於 Grid 與 Flexbox 之間：結構化一個軸向、讓另一個軸向自由發揮，將項目分散到多條 lane 中，形成緊密交錯的布局，同時保留每個項目的自然比例。¹

我要如何用 Grid Lanes 打造瀑布流布局？

三行 CSS：設定 display: grid-lanes、用 fr 單位的 grid-template-columns 定義軌道（例如用 1fr 1fr 1fr 表示三條等寬欄），再加上 gap。把 grid-template-columns 換成 grid-template-rows，就能把縱向瀑布流變成橫向磚牆。您只能選一個方向，不能兩個都選。¹

flow-tolerance 有什麼作用？

flow-tolerance 放寬或收緊「把每個項目放進最短欄」這條規則。純粹的最短欄擺放可能讓視覺順序與 tab 順序呈鋸齒狀錯位，損害無障礙性。開啟 flow-tolerance 後，瀏覽器會在決定擺放前先檢查較高的欄是否小於較矮的欄加上容差，藉此讓項目與閱讀順序保持一致，直到高度落差大到無法忽視為止。預設值是 1em。¹

我今天就能在生產環境使用 Grid Lanes 嗎？

在 Safari 26.4 中現在就能使用。其他瀏覽器用旗標把它擋住，因此 Grid Lanes 尚未達到跨瀏覽器 GA。請以漸進增強的方式推出它，並為仍需要旗標的瀏覽器準備後備方案。¹

Grid Lanes 能搭配我已經熟悉的 Grid 屬性嗎？

可以。項目層級的擺放使用既有的 Grid 屬性：grid-column: span 2 加寬項目、明確的欄位置擺放它，而 grid-template-columns: subgrid 把巢狀元件的內容折疊進父層布局。您控制欄的位置；列由 Grid Lanes 決定。¹

當您開始動手打造時，WebKit 維護了一份官方的 Grid Lanes 實務指南，位於 gridlanes.webkit.org，可作為上手參考。座談會也提到 Grid Lanes 能與全新的可自訂 select 組合運用：瀑布流布局可以在 ::picker(select) 下拉選單裡運作。²

Grid Lanes 正是那種會刪掉一個相依套件、而非增加一個的平台新增功能，這也正是無建構宣言的整套論點，並直通滿分 Lighthouse 紀錄中所記述的那種成果。交付原生、語意化的布局，而非由 JavaScript 渲染的網格，也能讓您的標記對機器保持可讀，這正是HTML 是代理想要的格式所主張的觀點。完整系列的中心頁面是 Apple 生態系列。

參考資料