相关疑难解决方法(0)

使网格容器填充列不是行

我希望我的网格像这样垂直填充:

1 4 7 
2 5 8
3 6 9
... arbitrary number of additional rows.
Run Code Online (Sandbox Code Playgroud)

相反,它会像这样水平填充:

1 2 3
4 5 6
7 8 9
Run Code Online (Sandbox Code Playgroud)

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

这就是我的div使用内联CSS样式的样子:

<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>
Run Code Online (Sandbox Code Playgroud)

重要的是我的网格宽3列,但我希望项目按列填充,而不是按行填充.CSS Grid中有可能吗?我已经阅读了这篇https://css-tricks.com/snippets/css/complete-guide-grid/,但没有看到有关订单的任何信息.

CSS Flexbox有flex-direction没有像CSS Grid那样的属性?

html css css3 flexbox css-grid

34
推荐指数
4
解决办法
9209
查看次数

标签 统计

css ×1

css-grid ×1

css3 ×1

flexbox ×1

html ×1