One big image + thumbnails 관련

CSS > Article(s)

---

Article(s)

• More CSS Tips

---

One big image + thumbnails

A CSS grid with a big image and 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 Big Image + thumbnails by t_afif on CodePen.

More detail

Exploring CSS Grid’s Implicit Grid and Auto-Placement Powers

---

When working with CSS Grid, the first thing to do is to set display: grid on the element that we want to be become a grid container. Then we explicitly define

---

More CSS Tips

• Stick an element to the top-right corner Place an element on the top-right corner of your CSS grid. January 13, 2022
• A matrix of cubes using one element Create a matrix of cubes using only one element. January 03, 2022
• max-width + centering with one instruction Use max() to center your element and set a max-width. December 10, 2021
• Hamburger menu icon Use CSS gradients to create a menu icon. December 07, 2021

One big image + thumbnails

---

A CSS grid with a big image and thumbnails