CSSworkingbaseline-2022
CSS scroll snapping
Carousels and galleries that lock into place — no JavaScript.
Scroll snapping lets the browser settle a scroll container on tidy resting points. Declare the snap behaviour on the scroller, the alignment on each child, and panning glides to crisp stops instead of drifting mid-item.
Horizontal snap carousel
HTML+CSS+JSintro Press Run to execute
scroll-snap-type: x mandatory on the flex row plus scroll-snap-align: start on each .slide means a horizontal flick always settles with one card's left edge at the scrollport start, never mid-card. scroll-padding: 16px insets that rest position so the snapped card clears the container's own padding instead of butting against the dashed border.