使用“ grid-auto-flow:column”时,首选隐式行而不是列

时间:2020-01-30 09:10:41

标签: css css-grid

我不认为有解决方案,也许这应该作为功能请求发布给浏览器制造商?

我的问题是我希望元素沿列方向流动:

[1][3]
[2][4]

所以我写了CSS:

.selector {
  display: grid;
  grid-template-columns: 1fr 1fr:
  grid-template-rows: auto auto;
  grid-auto-flow: column;
}

现在,如果有更多元素,我希望它自动生成更多行,如下所示:

[1][4]
[2][5]
[3][6]

但是相反,网格会生成更多列,如下所示:

[1][3][5]
[2][4][6]

如果我能说些类似的话会很有帮助:

grid-auto-columns: none

这将告诉网格“不会生成比我明确告诉您的更多的列”,而唯一的替代方法是生成更多的行。

1 个答案:

答案 0 :(得分:1)

也许您可以使用:

"grid-auto-flow: columns"

https://gridbyexample.com/examples/example18/

总是在父元素中。

相关问题