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 snap-center@sm scroll-snap-align:none@print">...</article>