如何在 CSS 中创建垂直对齐的网格？

使用 CSS 网格布局创建垂直对齐的网格

使用 CSS 网格布局时，可能会遇到以下情况：希望创建一个垂直流动的网格，而不是默认的水平流动。虽然 CSS Flexbox 提供了 flex-direction 属性来覆盖流向，但 CSS Grid 布局目前缺少一个类似的属性来显式指定所需的流向。

在 CSS Grid 布局中，grid-auto-flow 属性负责用于确定网格项目放置的方向。当设置为 row （默认值）时，项目水平流动，根据需要创建新行。相反，将 grid-auto-flow 设置为 column 会导致项目垂直流动，并根据需要创建新列。

但是，仅使用 CSS 网格布局无法实现这种所需的行为。要创建一个垂直填充指定列数而不定义行的网格，CSS 多列布局是一个合适的替代方案。与 CSS 网格布局不同，CSS 多列布局允许创建具有自动列流的多列布局，确保网格项目垂直填充，直到需要新列为止。

CSS 多列布局示例：

#container {
  columns: 3;  /* Specify the number of columns */
}

#container div {
  margin-left: 5px;  /* Add some margin for clarity */
}

<div>

通过利用 CSS 多列布局，您可以实现所需的垂直对齐指定列数的网格布局，无需定义行，克服了 CSS 网格布局在此特定场景下的限制。

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