進入可能的CSS砌體佈局的第一步

雖然不及容器查詢那樣炙手可熱，但CSS原生支持“砌體”（Masonry）佈局一直是CSS開發者們強烈期盼的功能。砌體佈局指的是元素大小不一，排列成參差不齊的行，有點像側放的磚牆。

CSS本身已能實現這種佈局，但有個很大的限制：項目並非按行排列，而是按列排列，這往往難以滿足需求。

 <code>/* 通常人们不想要这种排列方式*/ 1 4 6 8 2 7 3 5 9</code>

 <code>/* 他们想要这种排列方式* 1 2 3 4 5 6 7 8 9</code>

如果既要參差不齊的行排列，又要保持水平方向的源代碼順序，就只能藉助JavaScript。但現在情況有所改變，Firefox在夜間版中通過特性標誌引入了這項功能，作為CSS Grid的一部分。

Mats Palmgren表示：

此提案的實現現已在Firefox Nightly中可用。它默認情況下是禁用的，因此您需要加載about:config並將首選項layout.css.grid-template-masonry-value.enabled設置為true才能啟用它（在此頁面的搜索框中鍵入“masonry”，它會顯示該首選項）。

Jen Simmons已經創建了一些演示：

這真的是網格佈局嗎？

Rachel Andrew對此提出了一些質疑……

網格佈局並非砌體佈局，因為它是一個具有嚴格行和列的網格。如果您再次查看砌體佈局創建的佈局，我們會發現它並沒有嚴格的行和列。通常我們有定義的行，但列的行為更像flex佈局或Multicol。 Multicol佈局和砌體佈局的關鍵區別在於，在Multicol中，項目按列顯示。在砌體佈局中，通常希望它們按行顯示。

[…]

就我個人而言，我不太喜歡將其作為網格規範的一部分。乍一看它確實很有吸引力，但我認為這是一種相對專業的佈局模式，實際上根本不是網格佈局。它更類似於flex佈局而不是網格佈局。

通過將這種佈局方法放入網格規範中，我擔心我們隨後需要在對網格進行任何其他添加時支持砌體功能。

所有這些目前都尚未最終確定，CSS工作組正在對此進行積極討論。

正如Jen所說：

這是一個實驗性實現——正在討論作為可能的CSS規範。它還不是官方的，並且可能會發生變化。不要寫博客文章說這絕對是一件事。它還不是。還不是。它是一個實驗。一個原型。如果您有想法，請在CSSWG上發表您的意見。

Houdini？

上次討論原生砌體佈局時，它與CSS佈局API（作為Houdini的一部分）可以實現這一目標的想法混雜在一起。正如您在Chrome Canary中打開此演示（存儲庫）時所看到的，這是一項功能。

我並不完全了解Houdini是否旨在成為一項功能，以便像這樣的想法可以在瀏覽器中進行原型設計，並最終從Houdini中移除，或者這些想法是否應該留在Houdini中，或者是什麼。

以上是進入可能的CSS砌體佈局的第一步的詳細內容。更多資訊請關注PHP中文網其他相關文章！