使网格项目填充列而不是行

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>

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

自动放置算法通过依次填充各列并根据需要添加新列来放置项目。