IMG gallery with css grid

Question

I'm trying to make a responsive gallery with grid - I've got container with FIGUREs (and in those figures are img) - I want them to look like on the 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

and be reccurent

In my code i used :nth-child - cause those FIGUREs are creating by wordpress. And my version of gallery is not looking like on the first picture. It is like:

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

My code is:

    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

There are only 4 images in your example so I'm assuming you want that pattern repeated.

In which case you need to change the rows from a maximum of 8 to auto with grid-auto-rows: minmax(5vw, auto);

Then using nth-child(Xn+Y) you can size the figures accordingly.

* {
  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>