如何先填充列，然后用 CSS 网格响应地填充行？答案

【问题标题】：How do I fill columns first then fill rows responsively with css grids?如何先填充列，然后用 CSS 网格响应地填充行？
【发布时间】：2017-06-19 22:37:09
【问题描述】：

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

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 |

【问题讨论】：

【解决方案1】：

我不认为仅使用 CSS Grid 就可以实现您想要的布局。

在我看来，您希望 grid-auto-flow: row 一直工作到列填满第一行。此时，您想切换到grid-auto-flow: column。

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

【讨论】：