JSFiddle - React, Tailwind, and code Playground

by ckissi

HTML

<div class="gallery">
   <img src="https://picsum.photos/330/200" class="main"/>
   <img src="https://picsum.photos/100/100" class="t-one"/>
   <img src="https://picsum.photos/100/100" class="t-two"/>
   <img src="https://picsum.photos/100/100" class="t-three"/>
</div>

CSS

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: 200px 100px;
  justify-content: center;
  align-content: end;
  gap:15px;
}
.main {
  grid-column: 1 / 4;
}
.t-one{
  grid-column: 1;
  grid-row: 2;
}
.t-two {
  grid-column: 2;
  grid-row: 2;
}
  .t-three{
  grid-column: 3;
  grid-row: 2;
}