使网格容器填充列而不是行

Question

我希望我的网格像这样垂直填充：

1 4 7 
2 5 8
3 6 9
... arbitrary number of additional rows.

相反，它会像这样水平填充：

1 2 3
4 5 6
7 8 9

我想指定网格中的列数，而不是行数。

这就是我的 div 使用内联 CSS 样式的样子：

<code><div style="display:grid; grid-template-columns:1fr 1fr 1fr;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div></code>

网格的宽度必须为 3 列，这一点很重要，但我希望项目按列填充，而不是按行填充。这在 CSS 网格中可能吗？我已通读此 https://css-tricks.com/snippets/css/complete-guide-grid/ 但没有看到任何有关顺序的内容。

CSS Flexbox 有 flex-direction，CSS Grid 没有类似的属性吗？

Answer 1

对于根据需要创建新列且未定义行的垂直流动网格，请考虑使用 CSS 多列布局（示例）。 CSS 网格布局（至少当前实现 - 级别 1）无法执行此操作任务。问题是这样的：

在 CSS 网格布局中，grid-auto-flow 和 grid-template-rows / grid-template-columns 属性。

更具体地说，如果同时定义了grid-auto-flow: row（默认设置）和grid-template-columns，网格项可以在水平方向上很好地流动，根据需要自动创建新行。这个概念在问题的代码中得到了说明。

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

但是，切换到grid-template-rows后，网格项会堆叠在单列中。

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

使用 grid-auto-flow: row 和 grid-template-rows 不会自动创建列。必须定义grid-template-columns（因此，与grid-auto-flow呈反比关系）。

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

相反的情况下也有同样的行为。

定义了grid-auto-flow:column和grid-template-rows后，网格项可以在垂直方向上很好地流动，并根据需要自动创建新列。

#container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

但是，切换到grid-template-columns后，网格项会堆叠在一行中。 （这是大多数人问的问题，包括在这个问题中。）

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

不会自动创建行。这需要定义grid-template-rows。 （这是最常提供的解决方案，但通常会被拒绝，因为布局的行数是可变的。）

#container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

<div id="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
</div>

因此，请考虑采用多列布局解决方案，如上所述。

规范参考：7.7。自动放置：grid-auto-flow 属性