带有css网格的IMG图库

我正在尝试用网格制作一个响应性强的图库——我有一个包含数字的容器（这些数字中有img）——我希望它们看起来像img上的：

并且重新开始

在我的代码中，我使用了：nth child-因为这些数字是由wordpress创建的。我的画廊版本和第一张照片上的不一样。就像：

我的代码是：

    width: 1100px;
    margin: 0 auto;
    display: grid;    
    grid-template-columns: repeat(8, 1fr);    
    grid-template-rows: repeat(8, 5vw); 
    grid-gap: 5px;
}

figure:nth-child(1) {
    grid-column-start: 2;    grid-column-end: 6;    
    grid-row-start: 1;    
    grid-row-end: 5;
}

figure:nth-child(2) {
    grid-column-start: 4;    grid-column-end: 8;    
    grid-row-start: 1;    
    grid-row-end: 5;
}

figure:nth-child(3) {
    grid-column-start: 6;    grid-column-end: 11;    
    grid-row-start: 1;    
    grid-row-end: 8;
}

figure:nth-child(4) {
    grid-column-start: 1;    grid-column-end: 5;    grid-row-start: 3;    grid-row-end: 6;
}

figure:nth-child(5) {
    grid-column-start: 1;    grid-column-end: 7;    grid-row-start: 6;    grid-row-end: 9;
}```

Any ideas why is that happening? and how to make from it repetable version - I mean that when I will add again 5 items it will be look like first 1 - 5 - without adding code with nth-child(6).. (7)... etc. ?

---

在您的示例中只有4个图像，所以我假设您希望重复该模式

在这种情况下，您需要使用

网格自动行：minmax（5vw，auto）将行数从最多8更改为
auto

然后使用第n个子项（Xn+Y）

可以相应地调整图形的大小

*{
保证金：0；
}
.电网{
显示：网格；
网格模板列：重复（8，1fr）；
网格自动行：最小最大值（5vw，自动）；
网格间距：1vw；
}
身材{
背景：浅蓝色；
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：1vw；
}
图：第n个子项（4n+1），
图：第n个子项（4n+2）{
格构柱：跨度2；
网格行：跨度2
}
图：第n个子项（4n+3）{
格构柱：跨度4；
网格行：跨度4；
}
图：第n个子项（4n+4）{
格构柱：跨度4；
网格行：跨度2；
}

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