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
. An element that spans more than one column is called a spanning element.
Initial value |
none |
Applies to |
in-flow block-level elements |
Inherited |
no |
Media |
visual |
Computed value |
as specified |
Animation type |
discrete |
Canonical order |
the unique non-ambiguous order defined by the formal grammar |
Syntax
column-span: none;
column-span: all;
/* Global values */
column-span: inherit;
column-span: initial;
column-span: unset;
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.
none | all
Examples
h1, h2 {
column-span: all;
}
Specifications
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
Basic support |
(Yes)-webkit
|
(Yes)-webkit
| No support | 10 | 11.10 |
(Yes) -webkit
|
Unprefixed | 50.0 | (Yes) | | | | |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
Basic support |
(Yes)-webkit
| ? |
(Yes)-webkit
| No support | ? | 11.10 |
(Yes)-webkit
|
(Yes)-webkit
|
Unprefixed | No support | 50.0 | (Yes) | | | | | 50.0 |