<div class="gallery">
  <div><img src="https://images.unsplash.com/photo-1623772892441-15ee6fde6f8e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt=""/></div>
  <div class="v-stretch"><img src="https://images.unsplash.com/photo-1579550973101-0cbb102afb56?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt=""/></div>
  <div class="h-stretch"><img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1113&q=80" alt=""/></div>
  <div><img src="https://images.unsplash.com/photo-1623722824919-cea517d678e3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt=""/></div>
  <div><img src="https://images.unsplash.com/photo-1623360623339-d36b23c61ef0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt=""/></div>
  <div class="v-stretch"><img src="https://images.unsplash.com/photo-1623692747804-45f4d300a8be?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt=""/></div>
  <div class="big-stretch"><img src="https://images.unsplash.com/photo-1502899576159-f224dc2349fa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt=""/></div>
  <div><img src="https://images.unsplash.com/photo-1623770072404-bb5d7d2d0912?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt=""/></div>
  <div class="h-stretch"><img src="https://images.unsplash.com/photo-1491904768633-2b7e3e7fede5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt=""/></div>
  <div><img src="https://images.unsplash.com/photo-1623705868049-415863305add?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt=""/></div>
  <div><img src="https://images.unsplash.com/photo-1581014023865-4209099f2b71?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt=""/></div>
  <div><img src="https://images.unsplash.com/photo-1504298032419-2e78164cf76e?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""/></div>
  <div class="v-stretch"><img src="https://images.unsplash.com/photo-1516905365385-7f89706faaf8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt=""/></div>
  <div><img src="https://images.unsplash.com/photo-1505015353489-1759d3cc24e2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt=""/></div>
  <div class="big-stretch"><img src="https://images.unsplash.com/photo-1622890276840-8eabe803e2bb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""/></div>
  <div><img src="https://images.unsplash.com/photo-1621468444006-a2a0117b7c0a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=676&q=80" alt=""/></div>
  <div class="h-stretch"><img src="https://images.unsplash.com/photo-1471931452361-f5ff1faa15ad?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1052&q=80" alt=""/></div>
  <div><img src="https://images.unsplash.com/photo-1515863149848-223cbed59017?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80" alt=""/></div>
  <div class="big-stretch"><img src="https://images.unsplash.com/photo-1443632864897-14973fa006cf?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""/></div>
  <div><img src="https://images.unsplash.com/photo-1535224206242-487f7090b5bb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80" alt=""/></div>
  <div><img src="https://images.unsplash.com/photo-1620055374842-145f66ec4652?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt=""/></div>
</div>
.gallery {
  padding: 10px;
  max-width: 1100px;

  margin: 0 auto;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense; /* Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. */
}

/* Stretch image vertically */
.v-stretch {
  grid-row: span 2;
}

/* Stretch image horizontally */
.h-stretch {
  grid-column: span 2;
}

/* Stretch image vertically and horizontally */
.big-stretch {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Make the gallery items all matchy matchy on smaller screen sizes */
@media screen and (max-width: 515px) {
  .v-stretch {
    grid-row: span 1;
  }

  .h-stretch {
    grid-column: span 1;
  }

  .big-stretch {
    grid-column: span 1;
    grid-row: span 1;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.