如何在 CSS 中创建垂直流动的网格布局？

垂直流动的网格容器

在 CSS 网格布局中，无法直接将网格容器定义为垂直流动而不是水平流动。问题是是否应该指定列数或行数，因为 CSS Flexbox 提供了 flex-direction 属性。

CSS 网格布局限制

CSS 的问题网格布局是 grid-auto-flow 和 grid-template-rows/columns 属性之间的反比关系。当 grid-auto-flow: row 与 grid-template-columns 一起设置时，网格项会自动创建行，沿水平方向流动。

多列布局替代

对于真正垂直流动的网格，应该考虑 CSS 多列布局。此模块允许根据需要创建新列，而无需定义行：

#container {
  column-count: 3;
}

示例：

<div>

此代码将创建一个垂直流动的网格三列。

以上是如何在 CSS 中创建垂直流动的网格布局？的详细内容。更多信息请关注PHP中文网其他相关文章！