Javascript 使用css grid/flex创建类似马赛克的图案

我有一个很长的孩子列表，我想让他们像下面的模式，并重复模式。是否只使用cssgrid/Flex创建此模式

---

添加新答案，因为我一开始误解了你的要求。以下是将重复该模式的动态代码，而不考虑子对象：

.wrapper{
宽度：60%；
背景色：#333；
颜色：#fff；
显示：网格；
网格间距：1rem；
填充：1rem；
网格模板列：重复（4，1fr）；
}
.街区{
填充：2rem；
边框：1px实心#fff；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.块：第n个子（14n+1），
.块：第n个子（14n+12）{
格构柱：跨度2；
网格行：跨度2；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56