Column-Span Property
Last updated: 2026-09-13
column-span Column-Span Property
The column-span property specifies whether an element spans multiple columns. Set to all, the element spans every column; it is commonly used for headings or subheadings in a multi-column layout so they stand apart visually from the columned content.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
column-span: none | all;⚙️ Values
| Value | Type | Description |
|---|---|---|
none | all | Keyword | Whether the element spans columns. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-span | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： column-span:all pairs well with headings in multi-column layouts, letting the title span all columns for a clearer article structure.
Warning： column-span only affects the element itself; it does not change other elements' column distribution. Support was limited in older versions of Firefox, so check compatibility.
❓ FAQ
QCan column-span span a specific number of columns?
ANo. column-span has only two values, none, which does not span and is the default, and all, which spans every column, so you cannot span just 2 or 3 columns. To partially span columns, you would have to simulate it with nested multi-column containers or switch to a grid layout. This is a deliberate limitation of the CSS Multi-column spec and cannot be worked around with a value.
QWhich elements can use column-span?
Acolumn-span applies to block-level elements in the top-level flow of a multi-column container. The most common cases are headings, h1 through h6, subheadings, and pull-quotes that span all columns as a visual divider. It cannot be used on elements nested inside a column, and browser support varies; older browsers may simply ignore it, so treat it as progressive enhancement and always design the single-column fallback first.
QWhy isn't column-span:all taking effect?
APossible reasons: first, the element is not a direct block-level child of the multi-column container; second, the browser is too old, because cross-column support was incomplete in some versions and early Firefox builds had limited support; third, the multi-column container itself is not active, with only one column. First confirm the columns render, then check the element's position in the hierarchy.
QDoes column-span break the reading order of multi-column text?
ANo. A column-span:all element splits the multi-column text into two sections: the columns above it fill first, then the spanning element is shown, then the columns below it continue. Reading order still follows the document flow; the spanning heading simply forces a full-width row. So placing a spanning title at the top keeps the body flowing normally below it, and the same holds for spanning elements in the middle of the content.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
columns (Multi-column Shorthand)
Configure a multi-column layout overall.
column-count
Set the number of columns.
