Layout Tool

Scroll Snap Generator

Create CSS scroll snap layouts for carousels and galleries

Scroll Direction
Snap Type
Snap Alignment
Generated Classes
snap-x snap-mandatory overflow-x-auto
snap-start
Preview (Scroll to test)
1
2
3
4
5
6
Example Code
1<!-- Horizontal Carousel -->
2<div class="snap-x snap-mandatory overflow-x-auto flex gap-4">
3  <div class="snap-start flex-shrink-0 w-64">
4    Item 1
5  </div>
6  <div class="snap-start flex-shrink-0 w-64">
7    Item 2
8  </div>
9  <!-- more items -->
10</div>

You might also like

Flexbox Playground

Learn and build flexbox layouts

Animation Builder

Create CSS animations visually