CSS Scroll Snap for carousel-like scrolling

Need smooth, snapping scroll behavior for image galleries or card carousels without JavaScript.

Use CSS Scroll Snap for native scroll snapping.

.container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  scroll-padding: 1rem;
}

.container > .card {
  scroll-snap-align: start;
  flex: 0 0 300px;
}

Key properties:

• scroll-snap-type: axis + strictness (mandatory|proximity)
• scroll-snap-align: start|center|end on children
• scroll-padding: offset from container edge
• scroll-margin: offset from child edge

Native CSS scroll snapping is performant and accessible, avoiding heavy JS carousel libraries.

Building carousels, galleries, or paginated scroll views