Limited support Useful when ::column helps structure space, flow, or sizing without relying on brittle manual adjustments.

::column

Experimental: This is an experimental technology

Check the Browser compatibility table carefully before using this in production.

The ::column CSS pseudo-element represents the individual columns generated when a container is set to display its content in multiple columns via CSS multi-column layout. The ::column pseudo-element enables applying styles that do not affect the layout to these generated fragments.

Layout

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:column
Experimental
135
135
135
nested scroll-marker
Experimental

`::column::scroll-marker` nested pseudo-elements
135
135
135
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.multi-col::column {
  scroll-snap-align: start;
}
.multi-col::column::scroll-marker {
  content: '';
}

Live demo

::column style

CSS::column style demo.

PreviewFullscreen

Scroll-snaplink

CSS Scroll-snaplink demo.

PreviewFullscreen

m-ka- with

CSS m-ka- with demo.

PreviewFullscreen

Use cases

  • Component layout

    Use ::column to create more predictable spacing and placement inside reusable UI patterns.

  • Responsive structure

    Adapt containers and flow rules so layouts stay stable across viewport changes.

Cautions

  • Test layout rules with real content, long labels, and small screens before depending on them broadly.
  • Prefer simpler layout primitives if they already solve the problem clearly.

Accessibility

  • Layout choices should preserve reading order and support zoom without clipping.
  • Avoid visually clever positioning that makes content harder to follow with keyboard or assistive tools.

Related links