Галерея IMG с сеткой CSS

Question

Я пытаюсь создать адаптивную галерею с сеткой - у меня есть контейнер с фигурами (и на этих рисунках - img) - я хочу, чтобы они выглядели на img:

* ** 1003 тысяча два *https://scontent -waw1-1.xx.fbcdn.net / об / t1.15752-9 / 61946816_443268799837872_8925614736045768704_n.png? _Nc_cat = 106 & _nc_ht = scontent-waw1-1.xx & OH = 2b01432345a4ac144415d4c2b189e3f3 & ае = 5D51B1EA

и будь рецидивирующим

В моем коде я использовал: nth-child - потому что эти рисунки создаются в WordPress. И моя версия галереи не похожа на первую картинку. Это как:

https://scontent -waw1-1.xx.fbcdn.net / об / t1.15752-9 / 61557964_396031327659940_3538907237764300800_n.png? _Nc_cat = 106 & _nc_ht = scontent-waw1-1.xx & OH = c6aec556378304e882644fe7079c037f & ае = 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 изображения, поэтому я предполагаю, что вы хотите, чтобы этот шаблон повторился.

В этом случае вам нужно изменить строки максимум от 8 до auto с помощью grid-auto-rows: minmax(5vw, 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>