CSS Tip

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="">
</div>
.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: css-tricks.com/exploring-css-grids-implicit-grid-and-auto-placement-powers

More CSS Tips