如何使用具有不同高度元素的 CSS 網格佈局來建立磚石網格？

使用CSS 網格佈局建立磚石網格

在CSS 中，使用不同高度的元素實現網格效果可能具有挑戰性。然而，最近推出的 CSS 網格佈局提供了一個強大的解決方案。

使用CSS 網格佈局

要使用CSS 網格佈局建立磚石網格，您可以按照以下步驟操作:

1. 定義網格容器：使用display: grid屬性建立網格容器。
2. 設定自動行高： 使用 grid-auto-rows 屬性指定網格中每行的預設高度。這可以確保不同行中的元素在垂直方向上具有相等的間距。
3. 調整間距：使用 grid-gap 屬性設定網格項目之間的水平和垂直間距。
4. 定義列大小：使用 grid-template-columns 屬性指定網格中列的大小。在這裡，我們設定自動填充來建立具有靈活列大小的網格，而 minmax(30%, 1fr) 確保列至少有 30% 寬，並且可以根據需要擴展。

實作砌體網格

以下是建立砌體網格的範例HTML 與CSS 程式碼：

<grid-container>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item taller></grid-item>
  <grid-item short></grid-item>
  <grid-item tallest></grid-item>
  <grid-item tall></grid-item>
  <grid-item short></grid-item>
</grid-container>

grid-container {
  display: grid;
  grid-auto-rows: 50px;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}

[short] {
  grid-row: span 1;
  background-color: green;
}

[tall] {
  grid-row: span 2;
  background-color: crimson;
}

[taller] {
  grid-row: span 3;
  background-color: blue;
}

[tallest] {
  grid-row: span 4;
  background-color: gray;
}

此程式碼將建立一個磚石網格，其中不同高度的元素會自動排列成均勻分佈的網格狀結構。

以上是如何使用具有不同高度元素的 CSS 網格佈局來建立磚石網格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！