css - 我如何先填充列然后用 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。

即使该调整可以写入脚本，我也不确定如果不在容器上设置明确的高度或行，它是否会起作用。