{
CF
}
Code
Fronts
Back to CSS Grid Layouts
Scroll-Snap Slider
Pure CSS
Edit any tab — preview updates live
CSS
HTML
Reset
Copy
.gl-snap { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 8px; width: 320px; padding: 4px 4px 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 4px; font-family: system-ui, sans-serif; font-weight: 700; font-size: 32px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.3); } .gl-snap > div { scroll-snap-align: start; height: 130px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #7c6cff, #a78bfa); } .gl-snap > div:nth-child(2) { background: linear-gradient(135deg, #ff6c8a, #ff9a76); } .gl-snap > div:nth-child(3) { background: linear-gradient(135deg, #2eb88a, #3de8aa); } .gl-snap > div:nth-child(4) { background: linear-gradient(135deg, #f5a84a, #ffd479); } .gl-snap > div:nth-child(5) { background: linear-gradient(135deg, #3de8f5, #5aa0e0); } .gl-snap > div:nth-child(6) { background: linear-gradient(135deg, #a78bfa, #cbb8ff); }
<div class="gl-snap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> </div>
Live preview
Ready