<div class="masonry">

  <figure><img src='https://images.unsplash.com/photo-1587949208993-1d9d87cd6820?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></figure>
 <figure><img src='https://images.unsplash.com/photo-1587866431515-d5b521216d67?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></figure>
 <figure><img src='https://images.unsplash.com/photo-1588411202891-5f44b848aabe?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></figure>
  <figure><img src='https://images.unsplash.com/photo-1588569689672-5903b6decdb4?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></figure>
  <figure><img src='https://images.unsplash.com/photo-1588250482688-3613210556ce?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></figure>
  
  <figure><img src='https://images.unsplash.com/photo-1586152470140-6591facd9af1?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></figure>
 <figure> <img src='https://images.unsplash.com/photo-1586640459936-69b7b58ecae8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></figure>
<figure>  <img src='https://images.unsplash.com/photo-1586810164292-cbdf8f8e202c?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></figure>
<figure>  <img src='https://images.unsplash.com/photo-1588467648058-588a019cbdd7?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></figure>
<figure>  <img src='https://images.unsplash.com/photo-1587910234573-d6fc84743bc8?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt=''></figure>
</div>
body {
  font-family: Roboto, sans-serif;
}

img {
  max-width: 100%;
  display: block;
}



.masonry {
  display: grid;
  gap: 20px;
  grid: masonry / repeat(auto-fill, minmax(250px, 1fr));
  counter-reset: boxes;
}

figure {
  margin: 0;
  display: grid;
}

figure::before{
  counter-increment: boxes;
  content: counter(boxes);
  grid-column:1;
  grid-row: 1;
  background-color: rgba(0,0,0,.7);
  align-self: start;
  padding: .5em;
  color: #fff;
  font-weight: bold;
}

figure img {
  z-index: -1;
  grid-column:1;
  grid-row: 1;
}
Run Pen

External CSS

  1. https://fonts.googleapis.com/css2?family=Roboto

External JavaScript

This Pen doesn't use any external JavaScript resources.