Grid-auto-Flow：CSS Grid :: flex方向：flexbox

Flexbox布局中，父元素设置为display: flex后，子元素默认水平排列。使用flex-direction属性（或flex-flow简写）可以将子元素垂直排列成一列。

那么，CSS Grid如何实现类似的列式排列呢？例如，希望子元素按以下方式排列：

<code>1 3 5 7
--------
2 4 6 8</code>

而不是默认的：

<code>1 2 3 4
--------
5 6 7 8</code>

默认情况下，CSS Grid布局子元素也像Flexbox一样水平排列。以下示例创建了一个6列2行的网格，子元素先填充第一行，再填充第二行：

<code>.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 150px);
  gap: 20px;
}</code>

要实现列式填充（即“列包裹”），即子元素先填充第一列的两行，再填充第二列，可以使用grid-auto-flow属性。该属性控制网格容器如何填充未占用空间。只需设置：

<code>.parent {
  display: grid;
  grid-auto-flow: column;
  /* 设置列和行 */
}</code>

默认情况下，grid-auto-flow为row，子元素先填充行。将其设置为column后，每个新元素将先填充第一列的所有空间，然后移动到第二列，以此类推。

<code>.parent {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(2, 150px);
}</code>

grid-auto-flow属性可以看作是CSS Grid中的flex-direction属性的等效项，它控制了网格中元素的填充方式，避免了手动设置每个元素位置的繁琐操作。 理解grid-auto-flow属性对于高效使用CSS Grid至关重要。

以上是Grid-auto-Flow：CSS Grid :: flex方向：flexbox的详细内容。更多信息请关注PHP中文网其他相关文章！