coderef

column-spanBaseline · Widely available

The column-span CSS property controls whether a child element extends across all columns of a multi-column parent.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jul 28, 2020. Widely available since Jan 28, 2023.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–49Not supported
50+Supportedsince Apr 13, 2016
Current: 155
Edge
12+Supportedsince Jul 29, 2015
Current: 154
Firefox
1–70Not supported
71+Supportedsince Dec 10, 2019
Current: 157
Safari
1–8Not supported
9+Supportedsince Sep 30, 2015
Current: 27
MobileChrome Android
18–49Not supported
50+Supportedsince Apr 13, 2016
Current: 155
Firefox Android
4–68Not supported
79+Supportedsince Jul 28, 2020
Current: 157
Safari iOS
1–8Not supported
9+Supportedsince Sep 16, 2015
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: column-span.

Feature detection

CSS · check before using
@supports (column-span: initial) {
  /* styles that rely on column-span */
}

/* or in JavaScript */
if (CSS.supports("column-span", "initial")) {
  // use it
}

Documentation (MDN)

Specification

Sub-features

Support for each part of the feature (3). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
column-span501271950799
column-span.all501271950799
column-span.none501271950799