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

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 样式的样子：

 <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>

重要的是我的网格是 3 列宽，但我希望项目按列而不是按行填充。这在 CSS Grid 中可行吗？我已经通读了这个 https://css-tricks.com/snippets/css/complete-guide-grid/ 但没有看到任何关于顺序的信息。

CSS Flexbox 有 flex-direction ，CSS Grid 没有这样的属性吗？

原文由 Glen Pierce 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 属性

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议