Skip to main content

One big image + thumbnails

A big image + thumbnails using CSS Grid. Same code for both the horizontal and vertical layout.

A big image plus thumbnail

<div class="grid">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
.grid {
display: grid;
grid-auto-flow: row; /* it's the default value (can be omitted) */
.horizontal {
grid-auto-flow: column;
.grid img:first-child {
grid-area: span 3 / span 3;

See the Pen Big Image + thumbnails by Temani Afif (@t_afif) on CodePen.

More detail: