column-span

Avatar of Katy DeCorah
Katy DeCorah on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

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

ChromeFirefoxIEEdgeSafari
118119101210

Mobile / Tablet

Android ChromeAndroid FirefoxAndroidiOS Safari
11511511510.0-10.2

Don’t forget your prefixes!