CSS 磚石的替代提案

Rachel Andrew

Chrome 團隊迫不及待想看看網路上實作的磚石類型版面配置。然而，我們認為根據近期的 WebKit 文章所述，將這類規格導入 CSS 格線規格並不容易。我們也認為 WebKit 貼文是針對無人建議的磚石版本爭論。

因此，本文旨在說明 Chrome 為何擔心根據 CSS 格線版面配置規格實作磚塊，並明確說明替代提案的作用。簡單來說，

  • Chrome 團隊非常熱衷於解除封鎖，我們知道這是開發人員的需求。
  • 除非您認為砌體是否為格線，否則在格線規格中加入磚塊可能造成問題。
  • 在格線規格以外定義磚石，並不會導致多個軌道大小無法妨礙，也不能使用對齊或間隔等屬性，或者在格狀版面配置中使用的其他功能。

應該將砌體都應用於網格嗎？

Chrome 團隊認為，磚石應是獨立的版面配置方法，使用 display: masonry 定義 (或其他關鍵字應決定更理想的名稱)。本文稍後將列舉一些在程式碼中呈現的範例。

基於兩個相關原因，我們為何認為在格線版面配置之外，應該更妥善定義磚塊，也就是版面配置效能問題，以及磚石和格狀版面在一種版面配置方法中皆具備合理功能，而不採用另一種版面配置的功能。

效能

而網格和砌體則相反。格狀版面配置時，所有項目都會放在版面配置之前，瀏覽器也知道每個軌跡中的確切內容。這可以實現複雜的內建函式尺寸 在格狀空間中那樣也很實用藉由磚石，項目會依照樣子放置，瀏覽器並不知道每個測試群組的數量。所有內建函式大小的音軌或所有固定大小的測試群組並非都有問題，但您必須混用固定和內建函式的音軌。為解決這個問題，瀏覽器需要執行預先版面配置步驟，以各種可能方式呈現每個項目，因此如果格線較大，就會造成版面配置效能問題。

因此，如果您有一個包含 grid-template-columns: 200px auto 200px 軌跡的磚石版面配置 (這是格狀檢視的常見做法)，您就會開始遇到問題。新增子網格後，這些問題就會呈指數性。

有一個引數大部分不會遇到這個情況，但我們已經知道人員擁有非常大的網格。我們不希望交付的商品對於使用方式設下限制，比如在有替代方法的情況下使用。

如何處理不適用於每種版面配置方法的事情？

當 Flexbox 和格線成為 CSS 的一部分時，開發人員經常會覺得自己的做法不一致。這是因為我們長時間根據區塊版面配置，對版面配置的運作方式做出假設。一段時間過後，開發人員已開始瞭解格式設定背景資訊。當我們切換成格線或彈性格式設定內容時，表現出的行為可能會有所不同。舉例來說，在 Flexbox 中，由於 Flexbox 屬於單一維度，因此並非所有對齊方法都可供使用。

將遮罩融入格線中，會破壞此格式結構定義與對齊屬性 (例如對齊屬性) 可用性 (如 Box 對齊規格中所定義) 的明確連結。

如果我們決定處理先前所述的效能問題，方法是將混和的內建函式和固定追蹤定義在磚石中列為禁用，那麼您必須記住，最常見的格線版面配置模式並不適用於磚石。

有些模式也適合在磚石上採用，例如 grid-template-columns: repeat(auto-fill, max-content)，因為您沒有交叉限制，但需要在網格中保持無效狀態。以下是預期行為不同或有不同的有效值的屬性清單。

  • grid-template-areas：在磚石中，您只能指定非砌體方向的初始資料列。
  • grid-template：簡寫需要考量所有差異。
  • 由於法律值差異，因此追蹤 grid-template-columns 和 grid-template-rows 的大小值。
  • 「grid-auto-flow」不適用於砌體，masonry-auto-flow 不適用於格線。合併這些程式庫會導致採用版面配置方法導致無效的問題。
  • 網格有四個刊登位置屬性 (grid-column-start 等)，但岩石只有兩個刊登位置屬性。
  • 格線可以使用 justify-* 和 align-* 屬性的全部六項，但 Masonry 只使用 flexbox 等子集。

開發人員必須指定開發人員使用無效的值，且該值在格線 (附帶磚石) 或不含砌體的格線中無效的值時，之後所有新錯誤案例會發生什麼情況。舉例來說，使用 grid-template-columns: masonry 或 grid-template-rows: masonry 有效，但不能同時使用兩者。如果您同時使用兩種平台，會發生什麼情況？ 您必須指定這些詳細資料，讓所有瀏覽器都能正常運作。

無論是現在或未來，這一切都變得很複雜。我們必須確保所有程序都會考量砌體，以及是否在磚石中是否正常運作。而且與開發人員的觀點 同樣令人困惑為什麼使用 display: grid 的某些東西無法在磚石上發揮作用，為什麼您還是必須全神貫注？

替代提案

如先前所述，Chrome 團隊想定義格線規格外的磚石。這並不表示它會受限於非常簡單的版面配置方法，且資料欄大小相同。目前仍可使用 WebKit 文章中的所有示範內容。

經典磚石裝潢

多數人想到石工時，會想成具有多個大小等長欄的版面配置。請使用以下 CSS 定義，這需要的行程式碼比對等格狀組合版本少。

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

曲目大小相同。

使用不同資料欄寬度的格線類型追蹤大小

除了上述問題外，除了上述問題外，您還可使用所有自己喜愛的音軌尺寸。例如 WebKit 網誌文章的範例，該模式的重複狹窄資料欄。

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
  gap: 1rem;
}

寬度較窄的軌道模式。

磚石的其他尺寸調整

由於格線屬於二維版面配置方法，因此我們不允許在格狀檢視畫面中使用其他軌道尺寸選項。這些屬性在砌體上相當實用，但如果之後無法在格線中運作，就會令人感到困惑。

正在自動填入 max-content 個大小的軌跡。

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, max-content);
  gap: 1rem;
}

自動填入 auto 大小的軌跡，這將建立相同大小的軌道，並自動調整大小來配合最大的區塊。

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
  gap: 1rem;
}

鋪設自動調整大小的軌道。

允許內容跨欄跨欄，並將項目放在磚石版面配置上

沒有理由在獨立的磚石規格中，將內容橫跨不同欄。這可能會使用 masonry-track 屬性，也就是 masonry-track-start 和 masonry-track-end 的簡寫，因為在磚石版面配置中，只有一個維度可以橫跨其他元素。

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
}

.span-2 {
  masonry-track: span 2; /* spans two columns */
}

.placed {
  masonry-track: 2 / 5; /* covers tracks 2, 3, and 4 */
}

擺放已放置於物品的砌體。

地下磚塊或地下室採用石造痕跡

另外，我們也可能會以獨立的砌體規格提供上述支援，同樣地，同時也使用混合了內建函式和固定大小音軌的提示。確切來說需要定義我們沒有瞭解這種做法失敗的原因。

結論

我們很希望能取得可以交往的規格點，然而，我們希望以目前和未來都能正常運作的方式執行這項作業，開發人員也能放心使用。解決上述效能問題的唯一方法，就是解決第二個問題，也就是將網格的某些部分在砌體中造成非法使用 (更嚴重)。我們認為這種做法沒有問題，尤其在您可以擁有所需的所有格線特徵，同時保留不同的項目明確分隔的情況下，更是如此。

如有任何意見，歡迎在問題 9041 參與討論。

感謝 Bramus、Tab Atkins-Bittner、Una Kravets、Ian Kilpatrick 和 Chris Harrelson 審查本貼文，以及參考這些資訊的討論。