發布日期：2025 年 7 月 23 日
Microsoft Edge 和 Google Chrome 團隊很高興宣布，從 Chrome 和 Edge 140 版開始，CSS 砌體已準備好供開發人員進行早期測試。
由於 CSS 磚砌規格和語法仍有未解決的問題，您的意見回饋對我們至關重要，有助於確定 API 的最終形式。歡迎試用這項功能並分享心得。
立即在 Chromium 中測試 CSS 磚塊式版面配置
如要立即測試 CSS 格狀配置：
- 使用 Chrome 或 Edge 140 以上版本 (或其他 Chromium 架構瀏覽器，且版本相符)。
- 在新分頁中前往
about:flags。 - 搜尋「CSS Masonry Layout」。
- 啟用這項旗標。
- 重新啟動瀏覽器。
啟用這項功能後，您可以查看 Microsoft Edge 示範 (查看示範來源程式碼)，瞭解實際運作情形，也可以繼續閱讀，進一步瞭解這項功能和可用的語法。
什麼是磚塊排列？
CSS 砌體是一種版面配置模式，可讓您以類似磚塊的方式排列項目，這類排列方式不容易透過 CSS 格線、Flexbox 或多欄版面配置達成。
CSS 砌磚可將項目排列成欄或列格式，並以摺疊方式將項目放置在這些欄或列中。
你可以將磚塊排列方式視為高速公路，唯一的限制是不同車道的數量和大小。車輛可以在車道內任意行駛，並盡量靠近目的地 (即格狀配置的起點)。
版面配置項目只會在一個方向受到限制，且可沿著另一個方向自由移動，不受附近其他項目的影響。與格線不同的是，砌磚的軌道只會在一個方向定義。
在格狀配置中，項目的視覺順序不如最終設計重要。無論項目為何，都能充分利用可用空間。 因此，對於視覺效果豐富的頁面，以及內容的視覺順序不如最終結果重要的頁面，這都是絕佳選擇。
砌石布局有趣的地方在於，它也允許項目跨越多個軌道，就像格線一樣。發生這種情況時，項目會繼續放置，盡可能填滿可用空間。
這種自動放置行為可能會產生非常有趣的結果，這也是網頁設計師長期以來努力實現的目標。如需範例，請參閱紐約市相片集，瞭解如何以精簡方式在多個資料欄中顯示相片，同時允許特定項目 (本例中的標題) 跨越多個資料欄：
以下列舉幾個其他使用範例。
網誌版面配置，顯示每篇文章的縮圖和說明。
新聞網站，文章以欄顯示，部分文章比其他文章寬，主頁橫幅圖片則會跨越整個頁面寬度。
相片集，其中某些相片跨越多個資料欄，且資料欄大小不一。
解決方法和限制
如要在網路上實作這項設計模式，目前必須使用 JavaScript 程式庫，或是採用 CSS 格線、Flexbox 或多欄的解決方法。不過，這麼做可能會產生負面影響，包括：
- 效能較差：如果依賴 JavaScript 程式庫或自訂程式碼來模擬 CSS 磚塊，效能就會受到影響，進而導致負面使用者體驗。
- 程式碼複雜度較高：
- 在 CSS 格線、Flexbox 或多欄中，要確保項目位置正確且空間分配得宜，以模擬 CSS 砌磚版面配置，並不容易達成。
- 處理特定功能 (例如跨越多個欄或列的項目、項目的自訂排序方式，或調整為符合可視區域) 也可能導致複雜度和限制。
- 維護負擔較重：複雜的自訂 CSS 或 JavaScript 程式碼較難維護。
CSS 格線是一種非常靈活的版面配置模式，可讓您建立許多不同樣式的版面配置，無論是整個網頁、元件，還是只是要對齊個別項目，都非常實用。不過，這項功能與砌磚式版面配置的特性不同。
在 CSS 格線中，列和欄會嚴格定義，項目只能存在於格線儲存格內。如果嘗試沿著其中一個軸向包裝項目，但項目大小不符合各自的儲存格，您必須選擇在項目之間留有間隙，或將項目延展至填滿空白空間。
與磚塊排列方式一樣，彈性盒模型只會考量一個方向，並讓項目決定沿著另一個方向要佔用的空間。也就是說，只要您願意讓項目一次一個資料欄地以區塊方向配置，就能使用 Flexbox 取得類似砌磚布局的版面配置。Flex 容器也需要定義的區塊大小或高度，才能讓項目換行至新的 Flex 行，進而建立新的資料欄。
多欄也可以建立類似砌磚的版面配置，同樣是將項目排列在欄中。此外，多欄版面配置也不允許您調整各欄的大小。這些項目大小相同，但砌石格線在定義項目封裝的軌道時，提供許多彈性。
請注意，這裡的重點並非格線、彈性盒或多欄是比砌磚更差的版面配置，這類版面配置非常實用，重點是：如果您想要的是磚塊式版面配置，CSS 磚塊式版面配置就能滿足您的需求。
CSS 磚塊配置的狀態
CSS 工作群組正在 CSS Grid Level 3 規格中草擬 masonry。這項規格仍在建構中，暫時包含兩種不同的建議語法。第一個範例使用 display 屬性的新關鍵字，第二個範例則直接將砌磚整合至 CSS 格線版面配置。
使用 display: masonry
這個語法會將 CSS 磚塊排列視為獨立的 display 類型。如要進一步瞭解這個方法及其動機，請參閱 Google Chrome 團隊的網誌文章「需要意見回饋：我們應如何定義 CSS 磚塊排列？」，以及本文的其餘部分。Chromium 中的現有原型就是以這項提案為基礎。
display: grid; grid-template-*: masonry;
在這個語法中，CSS 磚塊直接整合到 CSS 格線。如要觸發砌石模式，請將 masonry 關鍵字套用至以列為基礎的砌石版面配置中的 grid-template-columns 定義，或是以欄為基礎的砌石版面配置中的 grid-template-rows 定義。
如要進一步瞭解這項提案和動機，請參閱 WebKit 貼文「Help us choose the final syntax for Masonry in CSS」。
請注意，這項提案的替代方案是 item-pack 屬性和 collapse 關鍵字，這會觸發 CSS 砌體，而不是使用其中一個格線範本屬性。
自 Chrome 和 WebKit 團隊發布貼文以來，CSSWG 持續討論整體語法，以利後續進展。您的意見回饋有助於這些論壇的後續發展。
如要進一步瞭解目前討論的狀態，請參閱問題 11593，其中列出目前討論的砌磚語法主題，以及問題 11243，其中彙整了目前語法爭議的內容。
建立自己的 CSS 磚塊版面配置
讓我們來輕鬆一下，建立 CSS 磚塊式版面配置。
雖然 CSS 砌體語法仍在討論中，但您今天可以在 Chromium 中測試這項功能，方法是啟用「CSS Masonry Layout」旗標，詳情請參閱「立即測試 CSS 砌體」。下列範例說明開發人員試用版提供的功能。
建立磚塊容器
如要建立第一個以欄為基礎的格狀容器，請使用 display:masonry，並使用 grid-template-columns 定義欄大小。由於 masonry-direction 預設為 column，因此您可以選擇是否要設定這項屬性。
.masonry {
display: masonry;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
如要改用以列為單位的格狀容器，請使用 display:masonry，並使用 grid-template-rows 定義列大小，然後設定 masonry-direction:row。
.masonry {
display: masonry;
masonry-direction: row;
grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
如您所見，這個語法與 Google 的原始提案略有不同。無論使用哪種觸發條件，CSS 工作群組都已決定在 CSS Masonry 版面配置中重複使用格線範本大小和放置屬性。
雖然這樣做可讓版面配置類型之間重複使用更多屬性，但您可能會覺得混淆，歡迎就此主題提供意見。我們可能會為 grid-template-columns 和 grid-template-rows 等屬性建立更多一般別名，例如 template-columns 或 template-rows，可用於格線和砌磚。
使用預設軌道大小
新的顯示類型可讓您重新思考資源預設值。
在格狀空間中，grid-template-columns 和 grid-template-rows 預設為 none，目前定義通常會產生單一欄或列。如果是磚塊式版面配置，這個預設值通常會導致不理想的版面配置。
Chromium 的實作項目會為 none 新增建議定義，取代 CSS 砌體中的預設軌道大小。這個新的預設軌道大小為 repeat(auto-fill, auto) 值。這個值會建立美觀的磚塊式版面配置，完全不必定義軌道大小：
.masonry {
display: masonry;
gap: 10px;
}
如圖片所示，格狀容器會建立盡可能多的自動調整大小的欄，以填滿可用空間。
使用 CSS 格線時，所有項目都會在軌道調整大小前放置，這表示無法進行這項軌道自動調整大小定義。不過，使用 CSS 磚塊時，由於放置位置和大小會交織在一起並簡化，因此不再適用這項限制。解除這項限制後，我們就能為格狀配置提供更有用的軌道預設大小。
嘗試使用 masonry 簡寫屬性
如先前所述，Chromium 目前的實作方式是依據 grid-template-* 屬性，在版面配置中定義砌石軌。不過，由於 Masonry 只有一個維度，我們也實作了 masonry 簡寫屬性，您可以使用這個屬性一次定義 Masonry 方向和軌跡定義，不必使用令人困惑的 grid- 前置字元屬性。
舉例來說，下列兩個程式碼片段會建立等效的 CSS 磚塊容器。
.masonry {
display: masonry;
masonry: "a a b" 50px 100px 200px row;
}
.masonry {
display: masonry;
masonry-direction: row;
grid-template-rows: 50px 100px 200px;
grid-template-areas: "a" "a" "b"
}
CSS 工作群組仍在討論 masonry 簡寫。歡迎立即試用，並與我們分享你的想法。
使用自訂軌道大小
在定義軌道大小方面，砌磚與格線一樣靈活，可讓您微調版面配置軌道的數量和大小。此外，砌磚軌道不一定要大小相同，例如：
.masonry {
display: masonry;
masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}
在這個範例中，我們定義了兩個前 3rem 軌，後面接著數量不一的 5rem 軌，最後是單一 12rem 軌。
橫跨多個測試群組
在砌磚模式中，項目不一定要限制在所放置的軌道中，因為項目可以視需要跨越多個軌道。如果某些項目比其他項目更重要，需要更多空間，這項功能就非常實用。
例如：
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.important-item {
grid-column: span 2;
}
您也可以使用這項功能跨越多個軌道，讓特定項目佔滿整個容器的長度：
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.full-bleed {
grid-column: 1 / -1;
}
新聞網站的示範內容會使用這個元素，在文章中顯示訂閱廣告。
微調磚塊項目放置位置
在 CSS Masonry 中，項目會放置在執行位置最短的欄或列中。
假設有兩欄的磚塊容器，如果容器的第一欄有 110 像素高的項目，第二欄有 100 像素高的項目，第三個項目就會放在第二欄，並更靠近砌磚方向的開頭 10 像素。
如果您認為執行位置的 10 像素差異對您的情況來說夠小，且偏好將第三個項目放在第一欄，以便更符合來源順序，請使用 item-tolerance 屬性。
新的 item-tolerance 屬性可控制項目放置位置的感應度。
在上述範例中，您可以將 item-tolerance: 10px; 套用至容器，自訂項目放置位置的變異性：
.masonry {
display: masonry;
masonry: 200px 200px;
gap: 10px;
item-tolerance: 10px;
}
請注意，草案規格將這項屬性稱為 item-slack。CSS 工作群組最近決定改用「item-tolerance」做為名稱，規格很快就會更新。
其他可用屬性
您可以使用與 CSS 格線相同的範本大小和放置屬性，在砌磚容器的格線軸中調整項目大小和放置項目，例如 grid-row、grid-column、grid-area、grid-template-areas 或 order。建立砌塊格線版面配置時，充分發揮 CSS 格線的強大功能。
徵求意見回饋
我們迫不及待想讓您探索 CSS 砌磚版面配置，發揮創意，並瞭解這項新功能可協助您解鎖哪些新功能。如要開始使用，建議您查看我們的範例及其原始碼，然後在 Chromium 中建立自己的範例 (請記得先啟用標記)。
您的意見回饋非常重要，可協助我們建構 API，並確認 API 的設計符合您的網路需求。歡迎試用，並分享你的想法！
如對 API 的形狀有任何想法或意見回饋，歡迎在問題 11243 中留言。如果想在自己的網誌或社群媒體上發文，請務必在 X 或 LinkedIn 上通知我們。
Chromium 仍在實作 CSS 砌體。如果您確實要測試，請注意我們仍在積極開發這項功能，因此可能會遇到無法正常運作的情況。目前的限制包括密集封裝、反向放置、子格線支援、超出流程的支援、基準線支援、開發人員工具支援、片段支援、間距裝飾支援等。
如果在測試這項功能時發現錯誤，請開啟新的 Chromium 錯誤，分享你的意見。