如何先填充列然后用css网格响应地填充行?
问题描述:
我有一个动态的项目列表,我想要显示。我希望他们填充网格的第一行,根据需要添加列,直到该行适合容器。接下来,它应该填充第二行,然后填充第三行,等等。我不关心订单,但它是很好的,从上到下,逐列显示的项目如下所示:如何先填充列然后用css网格响应地填充行?
1 4
2 5
3 6
这是有效的,但我必须明确指定行数。有没有办法做到这一点,而不显式指定行/列?
这是我想的网格中填充的顺序为:
第一:
1 2 3 4 |
下一页(没有更多的空间上的第一行):
1 3 5 7 |
2 4 6 8 |
接下来(第二排不再有空间):
1 4 7 10 |
2 5 8 11 |
3 6 9 12 |
答
我不相信只有CSS Grid才能实现您想要的布局。
正如我所看到的,您希望grid-auto-flow: row
工作,直到列填充第一行。此时,您想切换到grid-auto-flow: column
。
即使可以编写脚本,我不确定没有在容器上设置明确的高度或行就可以工作。