使网格容器填充列而不是行 [英] Make grid container fill columns not rows

问题描述

  1 4 7 
 2 5 8 
 3 6 9 
 ...任意数量的附加行。 
  

而是像这样水平填充：

  1 2 3 
 4 5 6 
 7 8 9 
  

我想指定网格中的列数，而不是行数。

什么我的div看起来像内联CSS样式：

< div style =snippet-code-html display：grid; grid-template-columns：1fr 1fr 1fr;> < 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>

>重要的是我的网格是3列宽，但我希望项目填充列，而不是行。这是可能的CSS网格？我已阅读此 https://css-tricks.com/snippets/ css / complete-guide-grid / ，但没有看到任何有关顺序的内容。
$ b CSS Flexbox有 flex-direction code>，是不是有像CSS网格的属性？

解决方案

初始值的 grid-auto- flow 属性是 row 。所以网格容器自动填充你的容器逐行。

要切换到列方向，请将值更改为列：

 ＃grid-container {
 display：grid; 
 grid-template-rows：1fr 1fr 1fr; / *切换属性* / 
 grid-auto-flow：column; / *切换值* / 
} 
  

>

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

grid-auto-flow 控制自动布局算法的工作方式，
指定了自动放置的物品如何流入网格。

＃grid-container {display：grid ; grid-template-rows：1fr 1fr 1fr; grid-auto-flow：column;}

< div ID = 网格容器 > < 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>

>更多细节在这里：使网格物品填充列而不是行


I want my grid to fill in vertically like this:

1 4 7 
2 5 8
3 6 9
... arbitrary number of additional rows.

Instead, it fills in horizontally like this:

1 2 3
4 5 6
7 8 9

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

This is what my div looks like with inline CSS styling:

<div style="display:grid; grid-template-columns:1fr 1fr 1fr;">
  <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>

It's important that my grid be 3 columns wide, but I want the items to be populated by column, not by row. Is this possible in CSS Grid? I've read through this https://css-tricks.com/snippets/css/complete-guide-grid/ but didn't see anything about order.

CSS Flexbox has flex-direction, isn't there an attribute like that for CSS Grid?

解决方案

The initial value of the grid-auto-flow property is row. So the grid container automatically fills your container row by row.

To switch to a column direction, change the value to column:

#grid-container {
  display:grid;
  grid-template-rows: 1fr 1fr 1fr; /* switched property */
  grid-auto-flow: column;          /* switched value */
}

From the spec:

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

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

#grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

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

More details here: Make grid items fill columns not rows

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