如何使 CSS 網格以固定的列數垂直填滿？

使網格容器填充列，而不是行

問題：

如何建立一個填滿的CSS 網格垂直而不是水平，允許任意數量的行，同時保持固定數量的列？

答案：

雖然 CSS 網格佈局本身無法處理此特定佈局，但 CSS 多列佈局提供了解決方案。

CSS多列佈局：

#container {
  column-count: 3;
}

這段程式碼定義一個包含三列的容器，該容器將根據需要自動建立新列，以滿足垂直流的要求。

CSS 網格佈局限制：

在CSS 網格佈局中， grid-auto-flow 和grid-template-columns 具有反比關係：

• 與grid-auto-flow: row （預設）並且定義了grid-template-colums，專案水平流動，自動建立新行。
• 但是，反轉這些屬性（grid-auto-flow：定義了欄位和 grid-template-rows）會導致無效的宣告。

因此，單獨使用 CSS 網格佈局不可能實現具有固定列數的垂直填充網格。

以上是如何使 CSS 網格以固定的列數垂直填滿？的詳細內容。更多資訊請關注PHP中文網其他相關文章！