Lassen Sie den Rastercontainer Spalten statt Zeilen füllen

Question

Ich möchte, dass sich mein Raster vertikal wie folgt füllt: 147258369...arbitrarynumberofadditionalrows Stattdessen wird es horizontal wie folgt gefüllt: 123456789 Ich möchte die Anzahl der Spalten im Raster angeben, nicht die Anzahl der Zeilen. So sieht mein Div mit Inline-CSS-Stil aus:

P粉821274260 · Answer

对于根据需要创建新列且未定义行的垂直流动网格，请考虑使用 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;
}

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

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

使用 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;
}

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

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

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

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

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

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

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

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

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