Skip to main content
Home / CSS Almanac / Properties / C / column-span

column-span

In a multi-column layout, you can make elements expand across the columns with column-span.

h2 {
 -webkit-column-span: all;
         column-span: all;
}

Assign column-span to an element inside of the multi-column layout to make it a spanning element. The multi-column layout will resume with the next non-spanning element.

The value of column-span can either be all or none.

Set an element with column-span: all to make it span the columns.

The value none for the property is the kill switch for a spanning element. You might use this when working with media queries to tell the spanning element to stop spanning.

See the Pen column-span example by CSS-Tricks (@css-tricks) on CodePen.

Related Properties

Additional Resources

Browser Support

Firefox does not support this column-span, but there are interesting workarounds.

Here's the support for Multi-column layout in general though:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

ChromeOperaFirefoxIEEdgeSafari
7911.170101210

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
10.0-10.211.1all677567

Don't forget your prefixes!

icon-link icon-logo-star icon-search icon-star