Lassen Sie den Rastercontainer Spalten statt Zeilen füllen

Question

Ich möchte, dass sich mein Raster vertikal wie folgt füllt:

1 4 7
2 5 8
3 6 9
... beliebig viele zusätzliche Zeilen.

Stattdessen wird es horizontal wie folgt gefüllt:

1 2 3
4 5 6
7 8 9

Ich möchte die Anzahl der Spalten im Raster angeben, nicht die Anzahl der Zeilen.

So sieht mein Div mit Inline-CSS-Stil aus:

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

Es ist wichtig, dass das Raster drei Spalten breit ist, aber ich möchte, dass die Elemente Spalten und nicht Zeilen ausfüllen. Ist das im CSS-Raster möglich? Ich habe dies https://css-tricks.com/snippets/css/complete-guide-grid/ gelesen, sehe aber nichts über die Reihenfolge.

CSS Flexbox hat flex-direction, hat CSS Grid nicht eine ähnliche Eigenschaft?

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