Scroll snap
Scrolling that clicks into place at section or card boundaries instead of stopping wherever your finger let go.
See it
What it is
Scroll snap makes the scroll container come to rest on defined boundaries instead of wherever momentum happened to die. In CSS it is two declarations: 'scroll-snap-type: y mandatory' on the scroller and 'scroll-snap-align: start' (or center) on the children. Horizontal card rails, full-viewport marketing sections, and native-feeling mobile carousels are the three places it earns its keep.
mandatory always lands on a snap point; proximity only snaps if you stop nearby, which is the safer default for anything with real reading content. Add 'scroll-padding' when a sticky header would otherwise cover the top of each snapped section, and 'scroll-snap-stop: always' on carousel items so a fast flick advances one card rather than five.
Gotcha: mandatory snapping on a section taller than the viewport traps people. They scroll, the container yanks them back to the boundary, and the bottom of that section becomes unreachable. Snap also fights JS smooth-scroll libraries (Lenis and friends) since both want to own momentum, and it can break in-page anchor links and keyboard paging if you do not test them.
Ask AI for it
Turn this horizontal card row into a snapping carousel with CSS only. Set the scroller to 'scroll-snap-type: x mandatory' with 'overscroll-behavior-x: contain' and hidden scrollbars; give each card 'scroll-snap-align: center' and 'scroll-snap-stop: always' so one flick moves exactly one card. Add scroll-padding-inline matching the container gutter so the first and last cards can center, keep the cards keyboard reachable with visible focus, and use proximity instead of mandatory at viewport widths where two or more cards are visible at once.