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。

这就是你在布局中得到的东西：

＆＃13;

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

＆＃13;

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

＆＃13;

如果切换到grid-auto-flow: column，则网格项垂直排列。

＆＃13;

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

＆＃13;

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

＆＃13;

但是对于垂直轴中的行行为，您需要定义行。

＆＃13;

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
  grid-template-rows: 25px 25px 25px;
}

＆＃13;

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

＆＃13;

来自规范：

7.7. Automatic Placement: the grid-auto-flow property

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

<强> row

自动放置算法通过依次填充每一行来放置项目，   根据需要添加新行。如果row和column都不是   提供，假设row。

<强> column

自动放置算法通过填写每列来放置项目   转，根据需要添加新列。

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

使网格项填充列而不是行

1 个答案: