使网格项填充列而不是行

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

自动放置算法通过依次填充每个列来放置项目,根据需要添加新列.

对于CSS Grid的替代解决方案,不需要指定行数,请尝试CSS Columns:https://stackoverflow.com/a/44099977/3597276