DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!
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
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 130 | 131 | 10 | 12 | 10 |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 10.0-10.2 |
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.