带有 css 网格的 IMG 图库

Question

我正在尝试用网格制作一个响应式画廊 - 我有带有 FIGURE 的容器(在这些数字中是 img( - 我希望它们看起来像在 img 上：

https://scontent-waw1-1.xx.fbcdn.net/v/t1.15752-9/61946816_443268799837872_8925614736045768704_n.png?_nc_cat=106&_nc_ht=scontent-waw1-1.xx&oh=2b01432345a4ac144415d4c2b189e3f3&oe=5D51B1EA

并定期

在我的代码中，我使用了：nth-child - 因为这些数字是通过wordpress创建的。我的画廊版本看起来不像第一张图片。就像：

https://scontent-waw1-1.xx.fbcdn.net/v/t1.15752-9/61557964_396031327659940_3538907237764300800_n.png?_nc_cat=106&_nc_ht=scontent-waw1-1.xx&oh=c6aec556378304e882644fe7079c037f&oe=5D588411

我的代码是：

    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. ?

Answer 1

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

在这种情况下，您需要使用 grid-auto-rows: minmax(5vw, auto); 将行从最多 8 行更改为 auto

行

然后使用nth-child(Xn+Y)您可以相应地调整数字的大小。

* {
  margin: 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(5vw, auto);
  grid-gap: 1vw;
}
figure {
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1vw;
}
figure:nth-child(4n+1),
figure:nth-child(4n+2) {
  grid-column: span 2;
  grid-row: span 2
}
figure:nth-child(4n+3) {
  grid-column: span 4;
  grid-row: span 4;
}
figure:nth-child(4n+4) {
  grid-column: span 4;
  grid-row: span 2;
}

<div class="grid">
  <figure>1</figure>
  <figure>2</figure>
  <figure>3</figure>
  <figure>4</figure>
  <figure>5</figure>
  <figure>6</figure>
  <figure>7</figure>
  <figure>8</figure>
  <figure>9</figure>
  <figure>10</figure>
  <figure>11</figure>
  <figure>12</figure>
  <figure>13</figure>
  <figure>14</figure>
  <figure>15</figure>
</div>