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 column-span, but there are interesting workarounds.
Here’s the support for Multi-column layout in general though:
Don’t forget your prefixes!
I get a wild bug in Safari while combining
-webkit-column-span:allwith-webkit-column-break-inside:avoid.Look what happens with “Module-3” there: http://codepen.io/hand_coding/pen/vEjYyJ
(Note: Beware that removing
overflow:hiddenfrom.moduleclass might make your browser unresponsive)I have this bug too today, is there a workaround 3 years later?
Nope, no solution in site for Safari’s weird issue there. Safari 13.1 Technology Preview shows the issue as well, and I can find only one other mention of the issue on the web.
Doesnt work in Firefox. so bad.
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.
I have a page where an h1 head with column-span:all; at the beginning of a text, jumps to the end below about 1040px window width. I haven’t (yet) found any fix for this bug.
Sorry, I forgot to say, in Safari desktop and iOS.