<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;
}
This Pen doesn't use any external JavaScript resources.