::column
The ::column CSS pseudo-element represents the individual columns of a multi-column layout container. Columns can only be styled with scroll snap CSS properties and can also have a ::scroll-marker pseudo-element, which scrolls to the column when activated.
Overview
The ::column CSS pseudo-element represents the individual columns of a multi-column layout container. Columns can only be styled with scroll snap CSS properties and can also have a ::scroll-marker pseudo-element, which scrolls to the column when activated.
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 | |
Syntax
.multi-col::column {
scroll-snap-align: start;
}
.multi-col::column::scroll-marker {
content: '';
}Live demo
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
Powered by web-features