<!--
basic horizontal snapping
slide: https://oh-snap.netlify.app/#basic-horizontal
-->
<h3>Start</h3>
<section class="basic-snap-x snap-align-start">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</section>
<h3>Center</h3>
<section class="basic-snap-x snap-align-center">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</section>
<h3>End</h3>
<section class="basic-snap-x snap-align-end">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</section>
@use postcss-nested;
@layer base, demosupport, demo;
@import "https://unpkg.com/open-props" layer(base);
@import "https://unpkg.com/open-props/normalize.min.css" layer(base);
@layer demo {
.basic-snap-x {
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
&.snap-align-start > * {
scroll-snap-align: start;
}
&.snap-align-center > * {
scroll-snap-align: center;
}
&.snap-align-end > * {
scroll-snap-align: end;
}
}
}
@layer demosupport {
body {
display: grid;
place-content: center;
}
h3 {
margin-inline-start: var(--size-5);
}
.basic-snap-x {
display: flex;
gap: var(--size-5);
padding: var(--size-5);
& > * {
block-size: 25vmin;
aspect-ratio: 1;
flex-shrink: 0;
box-shadow: var(--shadow-3);
&:nth-child(12n+1) { background: var(--indigo-4) }
&:nth-child(12n+2) { background: var(--violet-4) }
&:nth-child(12n+3) { background: var(--purple-4) }
&:nth-child(12n+4) { background: var(--pink-4) }
&:nth-child(12n+5) { background: var(--red-4) }
&:nth-child(12n+6) { background: var(--orange-4) }
&:nth-child(12n+7) { background: var(--yellow-4) }
&:nth-child(12n+8) { background: var(--lime-4) }
&:nth-child(12n+9) { background: var(--green-4) }
&:nth-child(12n+10) { background: var(--teal-4) }
&:nth-child(12n+11) { background: var(--cyan-4) }
&:nth-child(12n+12) { background: var(--blue-4) }
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.