CSS：磚石佈局

什麼是砌體佈局？

來自 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中文網其他相關文章！