Html 砌体效果-如何更改砌块的顺序？

我使用

列

（用于效果砌体），位置顺序为-自上而下

1 3 5
2 4 6

*{
框大小：边框框；
}
.栏目{
栏目：3个；
}
.栏目项目{
背景：#ccc；
宽度：100%；
利润率：0.10px；
破门而入：避免；
内部分页符：避免；
}
.列项目：第n个类型（2n+3）{
高度：75px；
}

1.
2.
3.
4.
5.
6.
7.
8.

您可以使用CSS网格实现此效果

.columns{
显示：网格；
网格模板列：重复（3，1fr）；
网格自动行：最小最大值（10px，32.5px）；
网格自动流动：稠密；
栅隙：10px；
}
.栏目项目{
背景：#ccc；
}
.列项目：第n个类型（2n+3）{
背景：红色；
网格行结束：跨度2
}
.列项目：第n个类型（6n+6）{
网格列：3
}
.列项目：第n个类型（6n+5）{
网格列：2
}

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

请尝试以下样式

* {
  box-sizing: border-box;
}

.columns {
   -moz-column-width: 6em;
 -webkit-column-width: 6em;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em;
}

.columns-item {
  display: inline-block;
 margin:  0.25rem;
 padding:  1rem;
 width:  100%; 
 background:  #efefef;
}

---

检查输出：

我们最近在前面的一个问题中遇到了几乎相同的问题：您可以看一看，我认为如果您想要mansory效应，您没有太多选择谢谢。如果有超过1000个街区呢？这个解决方案行得通吗？@Dmitry我已经简化/改进了CSS，因此您可以添加任意数量的块