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