column-span
The column-span
CSS property makes it possible for an element to span across all columns when its value is set to all
.
Try it
css
/* Keyword values */
column-span: none;
column-span: all;
/* Global values */
column-span: inherit;
column-span: initial;
column-span: revert;
column-span: revert-layer;
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
column-span =
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
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
css
article {
columns: 3;
}
h2 {
column-span: all;
}
Result
Specifications
Specification |
---|
CSS Multi-column Layout Module Level 1 # column-span |
Browser compatibility
BCD tables only load in the browser