Css 网格自动流动的固定列数：列

我需要做一个网格布局，正好有四列，并将元素向下排序，而不是向右排序。以下是我的出发点：

.wrapper{
显示：网格；
栅隙：10px；
网格模板列：重复（3，1fr）；
网格自动流：列；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
}
.box:第n个孩子（偶数）{
背景色：#ccc；
颜色：#000；
}

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

您可以使用

列计数：3

而不是

display:grid

，并将

display:inline block

添加到子元素中

.wrapper{
列数：3；
}
.盒子{
背景色：#444；
颜色：#fff；
边界半径：5px；
填充：20px；
字体大小：150%；
显示：内联块；
宽度：100%；
保证金：5px；
框大小：边框框；
}
.box:第n个孩子（偶数）{
背景色：#ccc；
颜色：#000；
}

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

您给出了3个元素、12个元素和13个元素的情况，其他情况如何？它在3到12之间应该如何运行？参见13示例。只要三列都填好就没什么大不了的（例如，4列向下是不可接受的，但2行1列+1行2列是可以接受的）。谢谢你，这非常好用！只有两个抱怨：四个人的情况有点尴尬（尽管我理解为什么），我只能投一张赞成票！这不是网格！如果某个项目变得更高，它会打破平衡layout@sKopheK当然，这是一个网格，如果你看不到它，那么你就做错了。另外，您似乎将此解决方案应用于另一个问题。此解决方案仅适用于OP要求的内容。如果使用不均匀的网格尺寸，那么它当然会断裂。如果您使用动态项目大小，请使用

display:grid

。@Aedan如果您喜欢ducktyping，那么是的，但在引擎盖下不是：）但是，我坚持更正，因为我没有读OP的最后一句话，他甚至会接受非网格解决方案，这不是我的情况。吉瓦