Layout Presets

Container Properties

Always snaps to nearest point

Scroll Padding

Offset snap points from container edges

Item Properties

Which part of item aligns to snap point
Can skip past this item
Outset from item's snap position

Manage Items (6)

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Save/Load Layouts

Live Preview - Try Scrolling!

1Snap: start
2Snap: start
3Snap: start
4Snap: start
5Snap: start
6Snap: start
←Scroll horizontally→

Generated CSS

/* Scroll Snap Container */
.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  overflow-y: hidden;
  display: flex;
  flex-direction: row;
  gap: 16px;
  height: 300px;
  /* Hide scrollbar (optional) */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scroll-container::-webkit-scrollbar {
  display: none;
}

/* Scroll Snap Items */
.scroll-item {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  flex-shrink: 0;
}

HTML Structure

<div class="scroll-container">
  <div class="scroll-item">Item 1</div>
  <div class="scroll-item">Item 2</div>
  <div class="scroll-item">Item 3</div>
  <!-- Add more items as needed -->
</div>

Scroll Snap Reference

scroll-snap-type

Defines snap behavior on container. Axis (x, y, both) + strictness (mandatory, proximity).

scroll-snap-type: x mandatory;

scroll-snap-align

Which part of the item should align to the snap position (start, center, end).

scroll-snap-align: center;

scroll-padding

Offsets the snap position from container edges. Great for fixed headers.

scroll-padding: 20px;

scroll-snap-stop

Controls if user can skip items. 'always' forces stop at each item.

scroll-snap-stop: always;

Common Use Cases

  • Carousels: Horizontal scroll with mandatory snapping
  • Full-page sections: Vertical mandatory with center align
  • Image galleries: Center aligned with proximity snapping
  • Card sliders: Start aligned with gaps for peek effect
  • Tabbed content: Horizontal with scroll-snap-stop: always

Rate this tool