如何使用 CSS 網格佈局來建立砌體網格？

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

使用CSS 網格佈局實現元素具有可變高度但相同寬度的響應式網格佈局可能具有挑戰性彈性盒或浮動。相反，請考慮使用強大的 CSS 網格佈局 模組。

CSS 網格佈局 為創建複雜的網格佈局提供了靈活高效的解決方案：

1. 顯示： 設定容器元素顯示：grid，表示它是網格容器。
2. 網格自動行： 指定網格一致的高度使用 grid-auto-rows 的行：50px。這設定每行的預設高度。
3. 網格間隙：使用網格間隙在網格項目之間添加間距：10px。
4. 網格範本列： 使用 grid-template-columns 定義列佈局：repeat(auto-fill, minmax(30%, 1fr))。這將建立一個具有至少 30% 寬度的列的網格，均勻地填充剩餘空間。
5. 跨行： 在各個網格項上使用 grid-row 屬性來控制它們的行數跨度。例如，[tall] 跨越兩行，而 [tallest] 跨越四行。

HTML 範例：

<grid-container>
  <grid-item short></grid-item>
  <!-- ... more grid items -->
</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;
}

/* ... more grid item styles */

CSS 範例：

以上是如何使用 CSS 網格佈局來建立砌體網格？的詳細內容。更多資訊請關注PHP中文網其他相關文章！