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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 50 | 12 | 71 | 9 | 50 | 9 | |
all | 6 | 12 | 71 | 5.1 | 18 | 5 |
none | 6 | 12 | 71 | 5.1 | 18 | 5 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (6)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (12)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (5.1)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (18)
Notes 1 item(s)
Compatibility
- Available with a vendor prefix: -webkit- (5)
Syntax
CSS
.article {
columns: 3;
}
.article h2 {
column-span: all;
text-align: center;
}Live demo
Use cases
-
Using 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.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.