什麼是砌體佈局?
來自 MDN:
砌體佈局是一種佈局方法,其中一個軸使用典型的嚴格網格佈局(最常見的是列),另一個軸使用砌體佈局。在砌體軸上,不是堅持嚴格的網格,在較短的項目之後留下間隙,而是下一行中的項目上升以完全填充間隙。
pinterest.com 的版面就是一個典型的例子:
我們可以從 CSS 工具箱中使用什麼?
我們使用簡單的 HTML 標籤:
<div> <p>My first shot was grid & grid-template-column<br> </p> <pre class="brush:php;toolbar:false">.photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; img{ width: 100%; } }
反應能力很棒,但每張圖片下方都有間隙。
接下來,使用column-count CSS容器屬性。
column-count CSS 屬性將元素的內容分成指定數量的欄位。
.photos { column-count: 4; img{ width: 100%; margin-bottom: 1rem; } }
不好。
當前佈局看起來符合預期,但圖像已縮放且不響應。雖然我們可以使用媒體查詢來控制回應能力,但我們的目標是提供更強大的解決方案。
columns CSS 簡寫屬性設定繪製元素內容時要使用的欄位數以及這些欄位的寬度。
.photos { columns: 250px; img{ width: 100%; margin-bottom: 1rem; } }
一行程式碼。太棒了!
每列的最小寬度為 250px。如果有超過 250 像素的額外空間,則列將擴展以填充空間。如果空間減少,列數也會隨之減少。
我們可以透過將版面配置設定為最多 X 列來限制列數:
.photos { columns: 250px 2; ... ... }
使用
列
不僅僅限於砌體影像佈局。我們也可以使用它來設定文字列的樣式:相同的 CSS,不同的內容。
這有幫助嗎?
您的用例是什麼?
以上是CSS:磚石佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章!