column-span

Summary

The column-span CSS property makes it possible for an element to span across all columns when its value is set to all. An element that spans more than one column is called a spanning element.

Overview table

Initial value: none
Applies to: block-level elements, except floating and absolutely positioned elements
Inherited: No
Media: visual
Computed value: as specified
Animatable: No
CSS Object Model Property: columnSpan
Percentages: N/A

Syntax

column-span: all
column-span: none

Values

none: Default. The content block does not span multiple columns.
all: The content block spans all columns on a page. All content that is declared before the content block is shown before the content block.

Examples

Makes 4 columns and creates a span that crosses through columns

/*
Makes 4 columns and creates a span that crosses through columns
*/

#column {
  /* Prefix free example below, use vendor prefixes where needed */
  column-count: 4;
  column-gap: 2em;
  padding: 5px;
}

.span-content {
  column-span: all;
}

View live example

Notes

An element that spans more than one column is called a spanning element.

Related specifications

CSS Multi-column Layout Module: W3C Candidate Recommendation

Attributions

Mozilla Developer Network : Article
Microsoft Developer Network: [Windows Internet Explorer API reference Article]