demo · v135

Column outline studio

Drag the column-count slider and watch the ::column pseudo highlight each column box in real time. Toggle between two styling modes — outline-only and tinted background — to see how a pure-CSS hook lets you style fragments that previously had no selector at all.

::column: ? mode: outline

Multi-column layout has been around since CSS3, but until now there was no way to style an individual column box. ::column changes that.

Carousels built from multicol can now mark the active fragment, draw rules, or animate columns into view.

The pseudo accepts only a subset of properties — it's a fragment, not an element — but it covers the visual essentials.

Combine with ::scroll-marker from the same milestone to get a CSS-native carousel pager with no JavaScript at all.

Each chunk of body text is broken across the columns by the browser based on width, gap, and content height.

That's the whole point of this concept — the same DOM, four very different layouts, all describable in CSS.

the code

.reel { columns: 3 14ch; column-gap: 1rem; }
.reel::column { box-shadow: 0 0 0 2px var(--accent-blue); }

/* tinted variant */
.reel.colored::column {
  background: rgba(10,143,92,0.07);
  box-shadow: 0 0 0 3px var(--accent-emerald);
}

see also