JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<div class="gallery">

  <div class="gallery__item gallery__item--1">
    <img src="https://forum.alsacreations.com/upload/1579270308-78493-image-1.jpg" class="gallery__img" alt="Image 1">
  </div>
  <div class="gallery__item gallery__item--2">
    <img src="https://forum.alsacreations.com/upload/1579270323-78493-image-2.jpg" class="gallery__img" alt="Image 2">
  </div>
  <div class="gallery__item gallery__item--3">
    <img src="https://forum.alsacreations.com/upload/1579270337-78493-image-3.jpg" class="gallery__img" alt="Image 3">
  </div>
  <div class="gallery__item gallery__item--4">
    <img src="https://forum.alsacreations.com/upload/1579270350-78493-image-4.jpg" class="gallery__img" alt="Image 4">
  </div>
  <div class="gallery__item gallery__item--5">
    <img src="https://forum.alsacreations.com/upload/1579270363-78493-image-5.jpg" class="gallery__img" alt="Image 5">
  </div>
  <div class="gallery__item gallery__item--6">
    <img src="https://forum.alsacreations.com/upload/1579270373-78493-image-6.jpg" class="gallery__img" alt="Image 6">
  </div>
</div>

CSS

.gallery {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 5vw);
  gap: 15px 15px;
}
.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery__item--1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

.gallery__item--2 {
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 3;
}
.gallery__item--3 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 1;
  grid-row-end: 6;
}
.gallery__item--4 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 6;
}
.gallery__item--5 {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 6;
  grid-row-end: 9;
}
.gallery__item--6 {
  grid-column-start: 5;
  grid-column-end: 9;
  grid-row-start: 6;
  grid-row-end: 9;
}