demo · v135

Snap-scrolling without per-slide wrappers

The spec-cited carousel use case: each column generated by a multi-column container becomes a scroll-snap target via ::column { scroll-snap-align: start; }. No <div class="slide"> wrappers in the markup — just a paragraph stream that the engine paginates. Scroll the gallery horizontally to feel the snap.

::column: ?

One

Markup is a single paragraph stream. The multi-column engine breaks it into columns, and ::column targets each column for snapping.

Two

You no longer write <div class="slide"> wrappers; semantic markup keeps the reading order intact for screen readers.

Three

Try removing scroll-snap-align from the pseudo and the carousel becomes a free scroll — same markup, different behaviour.

Four

Authors can change cards-per-view by changing the columns width or count.

Five

The CSS-only carousel is a major win for content sites — no virtual-list libraries, no markup tax.

Six

Pair this with ::scroll-marker (Chrome 135) and you get pagination dots for free.

CSS used: .gallery { column-width: 220px; column-fill: auto; height: 260px; scroll-snap-type: x mandatory; } .gallery::column { scroll-snap-align: start; }

the code

.gallery {
  column-width: 220px;
  column-fill: auto;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  height: 260px;
}
/* every generated column becomes a snap stop */
.gallery::column {
  scroll-snap-align: start;
}

One

Two

Three

Four

Five

Six

the code

see also