CSS scroll-snap-align Property

What You’ll Learn

The scroll-snap-align property controls how snap targets align inside a scroll container when scrolling stops. It helps create predictable carousel, gallery, and panel snapping.

Introduction

The scroll-snap-align property in CSS is part of the CSS Scroll Snap Module. It specifies how a snap point aligns with the scroll container’s scrollport when scrolling ends.

By using this property, you can control whether each slide, card, or panel snaps to the start edge, center, or end edge of the visible scroll area.

Definition and Usage

Apply scroll-snap-align to snap targets inside a scroll container — such as carousel slides inside a wrapper that already has scroll-snap-type enabled.

It works together with scroll-snap-type on the container and optional scroll-padding inset on the scrollport.

📝 Syntax

The syntax for the scroll-snap-align property is straightforward. It is applied to snap targets inside a scroll container.

element {
  scroll-snap-align: none | start | center | end;
}

Basic Example

.scroll-item {
  scroll-snap-align: start;
}

Related Properties

• scroll-snap-type — enables snapping on the scroll container
• scroll-snap-stop — controls whether scrolling can skip snap positions
• scroll-padding — insets the scrollport on the container

🎯 Default Value

The default value of the scroll-snap-align property is none, which means no snapping alignment is applied to the element.

💎 Property Values

When to Use scroll-snap-align

scroll-snap-align helps when snap targets need predictable landing positions:

• Horizontal carousels — Snap each slide to the start, center, or end of the viewport.
• Image galleries — Keep each photo aligned consistently when the user stops scrolling.
• Vertical panel flows — Snap full-height sections in onboarding or story layouts.
• Pagination-style scrollers — Make each card feel like a deliberate page stop.

Enable snapping on the container with scroll-snap-type first, then choose alignment on each snap target.

Examples Gallery

Start with the reference horizontal carousel, compare center and end alignment, then try a vertical snap layout.

<style>
  .scroll-container {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
  }

  .scroll-item {
    scroll-snap-align: start;
    flex: 0 0 auto;
    width: 200px;
    height: 200px;
    margin-right: 10px;
    background-color: lightblue;
  }
</style>

<div class="scroll-container">
  <div class="scroll-item">1</div>
  <div class="scroll-item">2</div>
  <div class="scroll-item">3</div>
</div>

.carousel-slide {
  scroll-snap-align: center;
}

.card {
  scroll-snap-align: end;
}

.scroll-container {
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.snap-item {
  scroll-snap-align: start;
}

scroll-snap-align in the family

scroll-snap-align works on snap targets inside a container that already has scroll-snap-type. Pair it with scroll-padding when fixed UI overlaps the scrollport.

.scroll-container { scroll-snap-type: x mandatory; }
.scroll-item { scroll-snap-align: start; }

💡 Best Practices