使网格容器填充列而不是行

关注

发信

关注(28)粉丝(399)

使网格容器填充列而不是行

本文介绍了使网格容器填充列而不是行的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

  code>，是不是有像CSS网格的属性？
解决方案
初始值的属性是 row 。所以网格容器自动填充你的容器逐行。
 
 
 要切换到列方向，请将值更改为列：
 
 
 ＃grid-container {
 display：grid; 
 grid-template-rows：1fr 1fr 1fr; / *切换属性* / 
 grid-auto-flow：column; / *切换值* / 
} 
  
  > 
 
 
 ＃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:

#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

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

08-18 15:57