Horizontal and Vertical Scrolling Image Gallery with CSS Scroll Snap

Horizontal Scroll on Mobile Devices and Vertical Scroll on Desktop

The CSS property Scroll Snap allows you to end a scroll event at a fixed point. For example, images or highlighted text can snap to the exact center of the screen area when scrolling is complete.

In this process, one or more images or other content elements are packed into a „scroll container“ within which the elements then snap to specific positions after scrolling.

Image Gallery with CSS Flexbox and CSS Scroll Snap