如何使 CSS 網格容器填充列而不是行？

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

在 CSS 網格佈局中，grid-auto flow 屬性決定項目是按行還是按列佈局。當設定為預設設定“行”時，項目將水平放置，並根據需要建立新行。如果所需的佈局是垂直的，這種行為通常並不理想。

當 grid-auto-flow 設定為 row 時，grid-template-columns 定義網格中的列數。但是，在這種情況下，項目仍然水平流動，填充行而不是列。

對於根據需要建立新列而不定義行的垂直流動網格，請考慮使用 CSS 多列改為佈局。它允許垂直堆疊項目，根據需要自動建立新列。

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

此程式碼片段說明了這個概念。儘管在 grid-template-columns 屬性中定義了三列，但專案將水平流動，並根據需要建立新行。請注意，不建議對此特定佈局使用 CSS 網格佈局。

以上是如何使 CSS 網格容器填充列而不是行？的詳細內容。更多資訊請關注PHP中文網其他相關文章！