html – 使网格项填充列而不是行_html-js-css

概述参见英文答案 > Make grid container fill columns not rows 5个我希望我的网格垂直填充： 1 4 7 2 5 83 6 9 而不是横向填充： 1 2 34 5 67 8 9 在我的网格中,我想指定列数,而不是行数. 这就是我的div看起来的样子： .grid { displ 参见英文答案 > Make grid container fill columns not rows 5个
我希望我的网格垂直填充：

1 4 7 2 5 83 6 9

而不是横向填充：

1 2 34 5 67 8 9

在我的网格中,我想指定列数,而不是行数.

这就是我的div看起来的样子：

.grID {  display: grID;  grID-template-columns: 1fr 1fr 1fr;}

<div >  <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: row.

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

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

<div >  <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：列,则网格项垂直布局.

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

从规格：

07001

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.