如何首先填充列，然后使用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。

即使可以编写这种调整，我也不确定如果没有在容器上设置明确的高度或行，它就能工作。