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

• columns
• column-count
• column-fill
• column-gap
• column-rule
• column-width

Additional Resources

• MDN Docs
• CSS3 Spec
• Can I Use

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:

Don’t forget your prefixes!