Grid Gallery

How to create main picture + bottom thumbnails design with Grid

HTML
<div class="gallery">
  <img src="./public/image1.jpg" />
  <img src="./public/image2.jpg" />
  <img src="./public/image3.jpg" />
  <img src="./public/image4.jpg" />
</div>

CSS
.gallery {
  display: grid;
  justify-content: center;
  grid-gap: 15px;
}

.gallery img:first-child {
  grid-column: span 3;
}

Last Updated:May 17, 2022