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

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< /code> 屬性。

更具體地說，如果同時定義了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 屬性

#