The columns property is a shorthand for column-width and column-count. One declaration starts a multi-column layout for flowing text.
A length sets the ideal column width. An integer sets how many columns to use. You can set either or both, in either order. It is not inherited. Gap, rules, and spanning headings still need column-gap, column-rule, and column-span.
Not deprecated. Study columns: 3, columns: 12em, and columns: 12em 3. The newer / <column-height> form has limited support — skip it until browsers catch up.
columns: <column-width> || <column-count> | initial | inherit;Examples: columns: 3; · columns: 12rem; · columns: 12rem 3; · columns: auto;
| Value | Description | Try it |
|---|---|---|
<integer> | Sets column-count (e.g. 3). Maximum columns | Try it |
<length> | Sets column-width (e.g. 12rem). Ideal width | Try it |
12rem 3 | Width and count together. Order can be either way | Try it |
auto | Both longhands stay automatic (initial-like behavior) | Try it |
initial | Resets to the initial shorthand (auto / auto) | Try it |
inherit | Inherits this property from the parent element | Try it |
columnsPick count, width, or both — then polish with gap and rules if needed.
columns to an integer, a length, or both (e.g. 12rem 3).column-gap if columns feel cramped.column-span: all on headings that should break across columns.| Piece | Required? | Role |
|---|---|---|
| Count (integer) | Optional | Caps how many columns exist |
| Width (length) | Optional | Preferred column size; count can flex |
| Both together | Optional | Ideal width with a maximum count |
| Gap / rule / span | Separate | Not part of this shorthand |
Only the columns shorthand changes on the sample paragraph.
Each snippet focuses on the columns shorthand only. Use Try It Yourself for a live editor.
Fix three equal columns with an integer.
<style>
article {
columns: 3;
}
</style>
<article>
<p>Text is split into three columns. Width is automatic for each column.</p>
</article>columns: 3 sets column-count to three.column-count: 3 with width auto.Prefer a readable column size and let the count flex.
<style>
article {
columns: 12rem;
}
</style>
<article>
<p>Columns aim for about 12rem. More columns appear when the box is wider.</p>
</article>columns: 12rem sets column-width.Combine an ideal width with a maximum column count.
<style>
article {
columns: 12rem 3;
}
</style>
<article>
<p>Prefer 12rem columns, but never more than three. Order can also be 3 12rem.</p>
</article>12rem 3 and 3 12rem mean the same pairing.If the shorthand surprises you, check these points.
3 is count. 3px or 3rem is width. Mixing them up changes the layout completely.
columns only covers width and count (for study). Add column-gap and column-rule separately.
auto alone is usually one columnWithout a length or count, you typically stay single-column. Set a useful value to see multi-column flow.
columns: 3 / 5em targets newer column-height behavior. Support varies — prefer width and count for reliable pages.
Multi-column columns flows continuous text. Grid tracks are a different layout system.
columns is a browser CSS shorthand for multi-column layout. Node.js, Deno, and Bun do not apply it.
column-width and column-count values are widely supported (Baseline since March 2017). The optional / column-height form is not part of these numbers.
Bottom line: Safe for count, width, and both together. Treat / height as limited. It is not a runtime API.
column-width and column-count.auto. Not inherited.One line: columns is the quick way to turn on multi-column text — set count, width, or both.
Learn how the CSS content property inserts generated text and images.
8 people found this page helpful