<div class="cards">
  <div class="card">
    <img src="https://images.unsplash.com/photo-1658815365798-2b0a2587c721?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTc0ODg&ixlib=rb-1.2.1&q=80" alt="">

  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1658208309901-2eaad3b5d118?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTc0ODg&ixlib=rb-1.2.1&q=80" alt="">
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1659264734878-63ca3d2215e6?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTc0ODg&ixlib=rb-1.2.1&q=80" alt="">
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1657841961278-58d9349b1cbf?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTc0ODg&ixlib=rb-1.2.1&q=80" alt="">
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1658828497357-557756e95576?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTgyNzg&ixlib=rb-1.2.1&q=80" alt="">
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1657891753725-6bdc1fe511c3?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTgyNzg&ixlib=rb-1.2.1&q=80" alt="">
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1658822788711-00921d2b2c65?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTgyNzg&ixlib=rb-1.2.1&q=80" alt="">
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1659469378420-e68c6ee21a28?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTgyNzg&ixlib=rb-1.2.1&q=80" alt="">
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1659586556037-c4e3a269a222?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTgyNzg&ixlib=rb-1.2.1&q=80" alt="">
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1659559107902-08b4f9157882?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTgyNzg&ixlib=rb-1.2.1&q=80" alt="">
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1658485322290-85d2e8c8460b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTgzODg&ixlib=rb-1.2.1&q=80" alt="">
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1658701667764-243044893bcc?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTgzODg&ixlib=rb-1.2.1&q=80" alt="">
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1659007288624-7c5e398ef9db?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTgzODg&ixlib=rb-1.2.1&q=80" alt="">
  </div>
  <div class="card">
    <img src="https://images.unsplash.com/photo-1660112358440-1b37b7644e0a?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NjA1OTg0NDI&ixlib=rb-1.2.1&q=80" alt="">
  </div>
</div>
.cards {
  columns: 4 100px;
  padding: 1.5rem;
  gap: 1.5rem;
}

.card {
  background: #eaeaea;
  break-inside: avoid;
  margin-block-end: 1.5rem;
  padding: 1rem;
}

.card img {
  max-width: 100%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.