1. css
  2. /properties
  3. /column-span

column-span

Definition

The column-span CSS property determines how many columns an element should span across in a multi-column layout.

Examples

Span all columns

.element {
  column-span: all;
}

Span two columns

.element {
  column-span: 2;
}

Don't span any columns

.element {
  column-span: 1;
}

Values

ValueDescription
<integer>Specifies the number of columns the element should span.
allSpecifies that the element should span all columns in the multi-column layout.
initialSpecifies the default value.
inheritSpecifies that the value should be inherited from the parent element.

Best Practices

  • Use column-span to create visual interest and break up large blocks of text into smaller chunks.
  • Avoid using column-span on elements that are already split across columns.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes