CSS scroll-snap-align Property

Definition and Usage

The scroll-snap-align property sets how a box’s snap area aligns inside the scroll container’s snapport. It is set on snap targets (slides, panels, cards) — not on the scroller itself.

Common values are start, center, and end. The initial value is none (not a snap target). It is not inherited. The container still needs scroll-snap-type.

CSS Syntax

With two values, the first is the block axis and the second is the inline axis.

Property Values

How to Use scroll-snap-align

Enable snap on the container, then align each target.

1. Make a scroll container with overflow and scroll-snap-type (for example x mandatory).
2. Mark each slide or panel with scroll-snap-align.
3. Pick start, center, or end for the look you want.
4. Optionally add scroll-padding or scroll-margin for breathing room.

Live Preview

Scroll the strip sideways. Change scroll-snap-align on the panels and snap again.

CSS Examples

Each snippet focuses on scroll-snap-align. Use Try It Yourself for a live editor.

<style>
  .scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .panel {
    scroll-snap-align: start;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
</div>

<style>
  .scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .panel {
    scroll-snap-align: center;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
</div>

<style>
  .scroller {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .panel {
    scroll-snap-align: end;
  }
</style>

<div class="scroller">
  <div class="panel">1</div>
  <div class="panel">2</div>
  <div class="panel">3</div>
</div>

Key Takeaways