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

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 没有类似的属性吗？

Answer 1

对于根据需要创建新列且未定义行的垂直流动网格，请考虑使用 CSS Multi-Column Layout (example)。 CSS 网格布局(至少当前的实现 - Level 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>

因此，考虑一个 multi-column layout solution ，如上所述。

规范引用:7.7. Automatic Placement: the grid-auto-flow property