如何使 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中文网其他相关文章！