scroll-snap-align

Setting the scroll snap position.

Overview

Examples

Align a snap item to the start

Use snap-start on child items inside a snapping scroll container.

<article class="snap-start">  Slide</article>

@layer utilities {  .snap-start {    scroll-snap-align: start  }}

Center snap items

Use snap-center when cards should settle in the middle of the scroll viewport.

<article class="snap-center">  Featured card</article>

Disable item snapping

Use scroll-snap-align:none for an item inside a snapping container that should not become a stop.

<article class="scroll-snap-align:none">  Spacer</article>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<article class="snap-start scroll-snap-align:none@print snap-center@sm">...</article>