如何先填充列然后用css网格响应地填充行？

Question

我有一个动态的项目列表，我想要显示。我希望他们填充网格的第一行，根据需要添加列，直到该行适合容器。接下来，它应该填充第二行，然后填充第三行，等等。我不关心订单，但它是很好的，从上到下，逐列显示的项目如下所示：

1 4 
2 5 
3 6 

父容器没有固定的高度。下面是它的样子：

这是有效的，但我必须明确指定行数。有没有办法做到这一点，而不显式指定行/列？

Codepen

这是我想的网格中填充的顺序为：

第一：

1 2 3 4 | 

下一页（没有更多的空间上的第一行）：

1 3 5 7 | 
2 4 6 8 | 

接下来（第二排不再有空间）：

1 4 7 10 | 
2 5 8 11 | 
3 6 9 12 | 

Answer 1

我不相信只有CSS Grid才能实现您想要的布局。

正如我所看到的，您希望grid-auto-flow: row工作，直到列填充第一行。此时，您想切换到grid-auto-flow: column。

即使可以编写脚本，我不确定没有在容器上设置明确的高度或行就可以工作。