如何在 CSS 中建立垂直流動的網格佈局？

垂直流動的網格容器

在CSS 網格佈局中，無法直接將網格容器定義為垂直流動而不是水平流動。問題是是否應該指定列數或行數，因為 CSS Flexbox 提供了 flex-direction 屬性。

CSS 網格佈局限制

CSS 的問題網格佈局是 grid-auto-flow 和 grid-template-rows/columns 屬性之間的反比關係。當 grid-auto-flow: row 與 grid-template-columns 一起設定時，網格項目會自動建立行，沿著水平方向流動。

多列佈局替代

對於真正垂直流動的網格，應該考慮 CSS 多列佈局。此模組允許根據需要建立新列，而無需定義行：

#container {
  column-count: 3;
}

範例：

<div>

此程式碼將建立一個垂直流動的網格三列。

以上是如何在 CSS 中建立垂直流動的網格佈局？的詳細內容。更多資訊請關注PHP中文網其他相關文章！