如何在 CSS 中建立垂直對齊的網格？

使用CSS 網格佈局建立垂直對齊的網格

使用CSS 網格佈局時，可能會遇到以下情況：希望建立一個垂直流動的網格，而不是預設的水平流動。雖然 CSS Flexbox 提供了 flex-direction 屬性來覆寫流向，但 CSS Grid 佈局目前缺少一個類似的屬性來明確指定所需的流向。

在 CSS Grid 佈局中，grid-auto-flow 屬性負責用於確定網格項目放置的方向。當設定為 row （預設值）時，專案會水平流動，根據需要建立新行。相反，將 grid-auto-flow 設為 column 會導致專案垂直流動，並根據需要建立新列。

但是，僅使用 CSS 網格佈局無法實現這種所需的行為。要建立一個垂直填入指定列數而不定義行的網格，CSS 多列佈局是一個合適的替代方案。與 CSS 網格佈局不同，CSS 多列佈局允許建立具有自動列流的多列佈局，確保網格項目垂直填充，直到需要新列為止。

CSS 多列佈局範例：

#container {
  columns: 3;  /* Specify the number of columns */
}

#container div {
  margin-left: 5px;  /* Add some margin for clarity */
}

<div>

透過利用CSS 多列佈局，您可以實現所需的垂直對齊指定列數的網格佈局，無需定義行，克服了CSS 網格佈局在此特定場景下的限制。

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