使网格项填充列而不是行 [英] Make grid items fill columns not rows

问题描述

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

  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 LT; / DIV> < div> 9< / div>< / div>  

解决方案

最初，网格在水平方向上放置项目。这是因为网格容器的初始设置是 grid-auto-flow：row 。

这就是你'进入你的布局：

  .grid {display：grid; grid-template-columns：1fr 1fr 1fr; grid-auto-flow：row; /* 默认设置;可省略* /}  

 < div class =格> < DIV→1< / DIV> < DIV> 2'; / DIV> < DIV> 3'; / DIV> < DIV> 4℃; / DIV> < DIV> 5℃; / DIV> < DIV→6< / DIV> < DIV大于7< / DIV> < DIV> 8 LT; / DIV> < div> 9< / div>< / div>  

如果您切换到 grid-auto-flow：column ，那么网格项目会垂直放置。

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

 < div类= 网格 > < DIV→1< / DIV> < DIV> 2'; / DIV> < DIV> 3'; / DIV> < DIV> 4℃; / DIV> < DIV> 5℃; / DIV> < DIV→6< / DIV> < DIV大于7< / DIV> < DIV> 8 LT; / DIV> < div> 9< / div>< / div>  

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

  .grid {display：grid; grid-template-columns：1fr 1fr 1fr; grid-auto-flow：列; 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 LT; / DIV> < div> 9< / div>< / div>  

：

7.7。自动放置：网格自动流属性

自动放置算法有效，可以准确指定自动放置的项目如何流入网格。

row


自动放置算法通过依次填充每行来放置项目，
将新行添加为必要。如果行和列均为
，行假设。

栏 $ b

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

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

I want my grid to fill in vertically:

1 4 7 
2 5 8
3 6 9

Instead of it fills in horizontally:

1 2 3
4 5 6
7 8 9

In my grid I want to specify the number of columns, not the number of rows.

This is what my div looks:

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

解决方案

Initially, the grid lays out items in a horizontal direction. This is because an initial setting of a grid container is grid-auto-flow: row.

That's what you're getting in your layout:

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

If you switch to grid-auto-flow: column, then the grid items are laid out vertically.

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

But for the row behavior in the vertical axis you need to define rows.

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

From the spec:

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

This property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid.

row

The auto-placement algorithm places items by filling each row in turn, adding new rows as necessary. If neither row nor column is provided, row is assumed.

column

The auto-placement algorithm places items by filling each column in turn, adding new columns as necessary.

For an alternative solution to CSS Grid, which doesn't require specifying the number of rows, try CSS Columns: https://stackoverflow.com/a/44099977/3597276

这篇关于使网格项填充列而不是行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！