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.
Syntax
The column-span
property is specified as one of the keyword values listed below.
Values
none
- The element does not span multiple columns.
all
- The element spans across all columns. Content in the normal flow that appears before the element is automatically balanced across all columns before the element appears. The element establishes a new block formatting context.
Formal definition
Initial value | none |
---|---|
Applies to | in-flow block-level elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
none | all
Examples
Making a heading span columns
In this example, the heading is made to span across all the columns of the article.
HTML
<article> <h2>Header spanning all of the columns</h2> <p> The h2 should span all the columns. The rest of the text should be distributed among the columns. </p> <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> <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> <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> <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>
CSS
article { columns: 3; } h2 { column-span: all; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'column-span' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
column-span | Chrome
Full support
50
| Edge
Full support
12
| Firefox
Full support
71
| IE Full support 10 | Opera
Full support
11.1
| Safari
Full support
9
| WebView Android
Full support
50
| Chrome Android
Full support
50
| Firefox Android
Full support
65
| Opera Android
Full support
11.1
| Safari iOS
Full support
9
| Samsung Internet Android
Full support
5.0
|
Legend
- Full support
- Full support
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Requires a vendor prefix or different name for use.
- Requires a vendor prefix or different name for use.