W3cubDocs

/CSS

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

/* 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

<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
CSS Multi-column Layout Module Level 1 # column-span

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`column-span`	506	1212	71	10	1511.1	95.1	50≤37	5018	79	1411.1	95	5.01.0