<div class="grid">
<figure>
<img src="https://images.unsplash.com/photo-1576451930877-c838b861e9b6?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="lights">
<figcaption>1. This is the caption</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1482003297000-b7663a1673f1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="tree">
<figcaption>2. This is the caption</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1482517967863-00e15c9b44be?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="bauble">
<figcaption>3. This is the caption</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1576451930877-c838b861e9b6?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="lights">
<figcaption>4. This is the caption</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1482003297000-b7663a1673f1?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="tree">
<figcaption>5. This is the caption</figcaption>
</figure>
<figure>
<img src="https://images.unsplash.com/photo-1482517967863-00e15c9b44be?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="bauble">
<figcaption>6. This is the caption</figcaption>
</figure>
</div>
body {
padding: 50px;
font: 1em Helvetica Neue, Helvetica, Arial, sans-serif;
}
img {
max-width: 100%;
}
.grid {
display: grid;
inline-size: 800px;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.grid figure:nth-child(odd) {
grid-column: auto / span 2;
}
.grid figure:nth-child(2) {
grid-column: auto / span 3;
}
figure {
margin: 0;
display: grid;
grid-template-rows: 200px min-content;
}
figure img {
object-fit: cover;
width: 100%;
height: 100%;
grid-row: 1 / 3;
grid-column: 1;
}
figcaption {
grid-row: 2;
grid-column: 1;
background-color: rgba(0,0,0,.5);
color: #fff;
padding: 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.