Columns Property
Last updated: 2026-09-13
columns Columns Property
The columns property is the shorthand for column-count and column-width, splitting an element's content into multiple columns automatically, similar to newspaper typography. It is often used to present long text in several columns for better readability.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
columns: auto | <integer> || auto | <length>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | Compute the column count automatically. |
<integer> | Type | A fixed number of columns. |
<length> | Type | A fixed column width. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| columns | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： columns is the shorthand for column-count and column-width; if only one value is written, the browser infers from its type whether it is a column count or a column width.
Warning： Multi-column layouts need a definite height or enough content to show the column split; otherwise the content may still render in a single column.
❓ FAQ
QWhat's the difference between columns and Flexbox for multi-column layouts?
Acolumns, the CSS Multi-column Layout, lets content flow automatically from one column into the next, like a newspaper; a single block of text is split across columns while reading order stays continuous. Flexbox, by contrast, makes each child a column of its own with no content flow between them. Use columns for flowing text and flex for laying out discrete child elements side by side.
QHow do I make a heading span all columns?
ASet column-span:all on the heading, and it spans across every column while the body text stays split below. This is the most common structure for multi-column articles: a full-width heading plus columned body text. Note that column-span accepts only none and all, so you cannot span a specific number of columns, and the heading must be a direct child of the multi-column container.
QHow should I understand the columns shorthand?
Acolumns is the shorthand for column-count and column-width. With a single value, the browser infers its meaning from the type: an integer such as columns:3 is a column count, and a length such as columns:200px is a column width. Both can be given together, for example columns: 200px 3 means roughly 200px columns with at most 3 of them, a complete multi-column setup in one line.
QWhat is the browser support for multi-column layouts?
AModern browsers support columns, column-count, column-gap, and column-rule well; Chrome, Edge, Firefox, and Safari all cover them. column-span:all needs newer versions, and in older browsers the layout falls back to a single column while content remains complete. That makes multi-column a safe progressive enhancement you can use without worries, since the worst case is a readable single-column fallback rather than a broken page.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
