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
5011.162101210

Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
10.0-10.211.1all666660

Don't forget your prefixes!

Comments

  1. User Avatar
    hand_coding
    Permalink to comment#

    I get a wild bug in Safari while combining -webkit-column-span:all with -webkit-column-break-inside:avoid.
    Look what happens with “Module-3” there: http://codepen.io/hand_coding/pen/vEjYyJ

    (Note: Beware that removing overflow:hidden from .module class might make your browser unresponsive)

  2. User Avatar
    Leigh
    Permalink to comment#

    Doesnt work in Firefox. so bad.

    • User Avatar
      fabriceperrinel@hand-coding.com
      Permalink to comment#

      Not so bad since it’s a Safari issue.
      Chrome renders the column-span correctly while Safari renders the header “Module 3” before AND after the column-span element.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag