grid-auto-flow : CSS 网格 :: flex-direction : Flexbox

当将父元素设置为 display: flex 时，其子元素会像这样从左到右对齐

现在，我们可以使用 flexbox 做的一件很酷的事情是改变方向，使子元素垂直堆叠在彼此之上，形成一个列。 我们可以使用 flex-direction 属性（或使用 flex-flow 简写）来实现这一点

好的，很酷。 但是我如何使用 CSS 网格来完成这样的操作呢？ 也就是说，假设我想要所有这些子元素像这样对齐

1 3 5 7
--------
2 4 6 8

…而不是这样

1 2 3 4
--------
5 6 7 8

默认情况下，当我将父元素设置为使用 CSS 网格时，元素会像 flexbox 一样从左到右定位。 在下面的示例中，我告诉网格有 6 列和 2 行，然后让子元素填满第一行的每一列，然后再填满第二行的每一列。 你知道，标准的换行行为。

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

基本上，我在这里想要的是相反的效果：我希望我们的子元素填满第 1 列、第 1 行 **和** 第 2 行，然后再移动到下一列。 换句话说，就是列换行！ 我知道，如果我创建一个带有行和列的网格，我可以将这些元素分别放置到这些位置。 像这样

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 150px);
}

.child-1 {
  grid-column: 1;
  grid-row: 1;
}

.child-2 {
  grid-column: 1;
  grid-row: 2;
}

.child-3 {
  grid-column: 2;
  grid-row: 1;
}

/* etc, etc. */

好的，很酷！ 这样可以让我得到我想要的结果，但是分别设置每个项目的定位实在是太麻烦了。 我感觉就像在使用 position: absolute，而且感觉不太智能。 那么，如果我只想让这种布局自动完成，以便每个新的子元素都按正确的位置对齐呢？

我想问的是：有没有 CSS 网格版本的 flex-direction: column 呢？

好吧，在四处查找了一番之后，Rachel Andrew 在她相当出色的游乐场 Grid by Example 中为我指出了正确的答案。 正如您在这个演示中所看到的，Rachel 向我们展示了如何实现这一点

太棒了！ Rachel 使用 grid-auto-flow 属性来实现这一点：它告诉网格容器如何使用子元素填充未占用的空间。 所以我可以只写这样一行代码

.parent {
  display: grid;
  grid-auto-flow: column;
  /* set up columns and rows here */
}

默认情况下，网格的子元素会填满每一列，直到一行填满，然后它会流到下一行。 这就是为什么 grid-auto-flow 的默认值为 row，因为我们首先填满网格的行。 但是，如果我们将其设置为 column，则每个新元素会填满第 1 列的所有空间，然后再移动到第 2 列，依此类推。

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

这就是 grid-auto-flow 中的 flow 部分的含义，而我很久以来都忽略了这个属性，因为它看起来（别笑）很可怕。 仅仅读到 grid-auto-flow 这个词就足以让我想要关掉笔记本电脑，然后跑到海里去。

但是！这是一个非常有用的属性，而且非常有意义，尤其是如果您将其视为 flex-direction 的 CSS 网格版本。