如何先填充列然后用 css 网格响应地填充行?
How do I fill columns first then fill rows responsively with css grids?
我有一个要显示的动态项目列表。我希望他们根据需要填充网格的第一行添加列,直到该行适合容器。接下来,它应该填满第二行,然后填满第三行,依此类推。我不关心顺序,但最好让项目从上到下逐列显示,如下所示:
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-auto-flow: row
工作直到列填满第一行。那时,您想切换到 grid-auto-flow: column
.
即使该调整可以写入脚本,我不确定如果不在容器上设置明确的高度或行,它是否会起作用。
我有一个要显示的动态项目列表。我希望他们根据需要填充网格的第一行添加列,直到该行适合容器。接下来,它应该填满第二行,然后填满第三行,依此类推。我不关心顺序,但最好让项目从上到下逐列显示,如下所示:
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-auto-flow: row
工作直到列填满第一行。那时,您想切换到 grid-auto-flow: column
.
即使该调整可以写入脚本,我不确定如果不在容器上设置明确的高度或行,它是否会起作用。