如何在 CSS 中創建具有不同高度的磚石網格佈局？

具有Flexbox 或其他佈局的CSS 磚石網格

在CSS 中創建元素具有不同高度的網格佈局可能具有挑戰性。雖然 Flexbox 提供了靈活性，但它可能無法滿足新元素與前一個元素底部對齊的要求。

引入 CSS 網格佈局

而不是 Flexbox，請考慮利用 CSS 網格佈局來實現此目的。它提供了一種更強大、更直觀的方式來實現砌體網格：

HTML結構：

<grid-container>
  <grid-item short></grid-item>
  <grid-item tall></grid-item>
  ...
</grid-container>

CSS：

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;
}

說明：

1. display: grid: 將容器初始化為網格佈局。
2. grid-auto-rows: 50px: 將每個網格行的高度設定為 50 像素。
3. grid-gap: 10px: 指定網格之間的間距items.
4. grid-template-columns: 定義網格中有多少列（自動填入）以及每列的最小寬度（min-content：30%，1fr） .
5. grid-row: span X: 表示該項目應佔據 X 個網格行。

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