<div class="grid">
<img class="item item--tall" src="https://picsum.photos/200/300"/>
<img class="item item--big" src="https://picsum.photos/200/300"/>
<img class="item" src="https://picsum.photos/200/300"/>
<img class="item" src="https://picsum.photos/200/300"/>
<img class="item" src="https://picsum.photos/200/300"/>
</div>
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 200px;
gap: 10px;
max-width: 600px;
}
.item {
width: 100%;
height: 100%;
object-fit: cover;
grid-column: span 2;
}
.item--big,
.item--tall {
grid-column: span 3;
grid-row: span 2;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.