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.
/* Keyword values */ column-span: none; column-span: all; /* Global values */ column-span: inherit; column-span: initial; column-span: unset;
Initial value | none |
---|---|
Applies to | in-flow block-level elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | per grammar |
Syntax
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 syntax
none | all
Examples
h1, h2 { column-span: all; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Multi-column Layout Module The definition of 'column-width' in that specification. |
Candidate Recommendation | 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.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 50 Yes -webkit- | Yes Yes -webkit- | No | 10 | 11.1 15 -webkit- | Yes -webkit- |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 50 Yes -webkit- | 50 Yes -webkit- | Yes Yes -webkit- | No | ? | ? | Yes -webkit- |