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 ModuleThe 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.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
column-span
|
Chrome Full support 50 Full support 50 Full support 6 Prefixed' Implemented with the vendor prefix: -webkit- |
Edge Full support 12 Full support 12 Full support 12 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Full support 71 Full support 71 Full support 65 Disabled' From version 65: this feature is behind the |
IE
Full support 10 |
Opera Full support 11.1 Full support 11.1 Full support 15 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari Full support 9 Full support 9 Full support 5.1 Prefixed' Implemented with the vendor prefix: -webkit- |
WebView Android Full support 50 Full support 50 Full support ≤37 Prefixed' Implemented with the vendor prefix: -webkit- |
Chrome Android Full support 50 Full support 50 Full support 18 Prefixed' Implemented with the vendor prefix: -webkit- |
Firefox Android Full support 65 Full support 65 Disabled' From version 65: this feature is behind the |
Opera Android Full support 11.1 Full support 11.1 Full support 14 Prefixed' Implemented with the vendor prefix: -webkit- |
Safari iOS Full support 9 Full support 9 Full support 5 Prefixed' Implemented with the vendor prefix: -webkit- |
Samsung Internet Android Full support 5.0 Full support 5.0 Full support 1.0 Prefixed' Implemented with the vendor prefix: -webkit- |
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.
See also
column-span by Mozilla Contributors is licensed under CC-BY-SA 2.5.