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.

Related Properties

Additional Resources

Browser Support

Firefox does not support this property.

Multi-column layout support:

Chrome Safari Firefox Opera IE Android iOS
Any 3+ 1.5+ 11.1+ 10+ 2.3+ 6.1+

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.

Submit 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