使网格项填充列而不是行

Question

我希望我的网格垂直填充：

1 4 7 
2 5 8
3 6 9

而不是水平填充：

1 2 3
4 5 6
7 8 9

在我的网格中，我希望指定列的数量而不是行的数量。

这是我的div外观：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

<div class="grid">
  <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>

- Elvin Mammadov

Answer 1

最初，网格以水平方向布置项目。这是因为网格容器的初始设置是 grid-auto-flow: row。

这就是您在布局中得到的内容：

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: row; /* default setting; can be omitted */
}

<div class="grid">
  <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 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

<div class="grid">
  <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 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: 25px 25px 25px;
}

<div class="grid">
  <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属性

此属性控制自动布局算法的工作方式，指定自动放置的项目如何流入网格。

row

自动布局算法通过逐行填充来放置项目， 必要时添加新行。如果未提供row或column，则默认为row。

column

自动布局算法通过逐列填充来放置项目， 必要时添加新列。

如果您想要一种不需要指定行数的CSS Grid替代方案，请尝试使用CSS Columns：https://dev59.com/UlcP5IYBdhLWcg3worZh#44099977

- Michael Benjamin