Simple Scroll Snapping Carousel (Flexbox Layout / Grid Layout) 관련

CSS > Article(s)

---

Article(s)

---

Simple Scroll Snapping Carousel (Flexbox Layout / Grid Layout)

Here are two small scroll-snapping carousels that I made. In the top one the items are laid out using CSS Flexbox, whereas the second one uses CSS Grid. The code also works fine with arbitrarily sized .scroll-items elements, they don’t need to have the same width. ℹ️ Want to now more about scroll snapping? Check … Continue reading ”Simple Scroll Snapping Carousel (Flexbox Layout / Grid Layout)”

Here are two small scroll-snapping carousels that I made. In the top one the items are laid out using CSS Flexbox, whereas the second one uses CSS Grid.

See Easy Scroll Snapping Carousel (Flexbox Layout / Grid Layout) by bramus on CodePen.

The code also works fine with arbitrarily sized .scroll-items elements, they don’t need to have the same width.

Info

Want to now more about scroll snapping? Check out Well-Controlled Scrolling with CSS Scroll Snap by Google, and Practical CSS Scroll Snapping on CSS Tricks.

😅

Great to see that CSS Scroll Snapping moved away from the snapList, as first proposed in 2013.

Simple Scroll Snapping Carousel (Flexbox Layout / Grid Layout)

---

Here are two small scroll-snapping carousels that I made. In the top one the items are laid out using CSS Flexbox, whereas the second one uses CSS Grid. The code also works fine with arbitrarily sized .scroll-items elements, they don’t need to have the same width. ℹ️ Want to now more about scroll snapping? Check … Continue reading ”Simple Scroll Snapping Carousel (Flexbox Layout / Grid Layout)”