column-span

Katy DeCorah on

Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial 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.

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:

Don’t forget your prefixes!