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.
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: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)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.