column-span
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.
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
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
(Yes)-webkit 50.0 |
(Yes)-webkit (Yes) | No support[1] | 10 | 11.10 | (Yes) -webkit |
Feature | Android | Android Webview | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | Chrome for Android |
---|---|---|---|---|---|---|---|---|
Basic support | (Yes)-webkit |
? 50.0 |
(Yes)-webkit (Yes) | No support[1] | ? | 11.10 | (Yes)-webkit |
(Yes)-webkit 50.0 |
[1] This feature is not implemented yet. See bug 616436.
© 2005–2017 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/column-span