The column-span
CSS property makes it possible for an element to span across all columns when its value is set to all
.
/* Keyword values */ column-span: none; column-span: all; /* Global values */ column-span: inherit; column-span: initial; column-span: unset;
An element that spans more than one column is called a spanning element.
The column-span
property is specified as one of the keyword values listed below.
none
all
none | all
In this example, the heading is made to span across all the columns of the article.
<article> <h2>My Very Special Columns</h2> <p>This is a bunch of text split into three columns using the CSS `columns` property. The text is equally distributed over the columns.</p> </article>
article { columns: 3; } h2 { column-span: all; }
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'column-span' in that specification. | Working Draft | Initial definition. |
Initial value | none |
---|---|
Applies to | in-flow block-level elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | per grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 50
|
12
|
No | 10 | 11.1
|
Yes
|
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 50
|
50
|
Yes
|
No | ? | Yes
|
5.0
|
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-span