The columns shorthand sets column width and column count together — the fastest way to start a multi-column layout.
Width + count.
Flowing text layout.
Default value.
Flexible values.
Adapts to space.
Magazine-style text.
The columns CSS property is a shorthand that sets the number and width of columns for an element. It combines column-width and column-count into one declaration, making it easy to create multi-column layouts that enhance readability and aesthetics.
Use it on block containers with flowing text content — articles, news sections, or long-form prose. Pair with column-gap, column-rule, and column-span for spacing, dividers, and full-width headings.
columns: 200px 3 means each column should be about 200px wide, with a maximum of 3 columns. On narrow screens you may get fewer columns automatically.
The syntax for columns combines column width and column count:
selector {
columns: column-width column-count;
}.multicolumn {
columns: 200px 3;
}auto auto.column-width; second (integer) sets column-count.columns: 3;.columns: 200px;.| Question | Answer |
|---|---|
| Initial value | auto auto |
| Shorthand for | column-width and column-count |
| Inherited | No |
| Animatable | No |
| Common use | columns: 200px 3; for readable article layouts |
The columns shorthand accepts width and count values from its longhand properties.
| Value | Description |
|---|---|
| column-width | Specifies the ideal width of each column. Can be any valid length value (e.g., px, em, rem, etc.). |
| column-count | Specifies the number of columns. Must be a positive integer. |
| Shorthand | Longhand equivalent |
|---|---|
columns: 200px 3; | column-width: 200px; column-count: 3; |
columns: 3; | column-count: 3; |
columns: 250px; | column-width: 250px; |
columns: auto; | column-width: auto; column-count: auto; |
A text block using columns: 200px 3 — up to three columns, each about 200px wide.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis egestas rhoncus. Donec facilisis fermentum sem, ac viverra ante luctus vel.
Ut sit amet massa bibendum, scelerisque velit eu, sodales libero. Maecenas semper lacus nec ligula tincidunt, vitae iaculis nisi faucibus.
Integer convallis libero et ligula ultricies, a bibendum lacus posuere. Vivamus ullamcorper vehicula massa, a efficitur turpis tincidunt vel.
Try width + count, count-only, width-only, and a full magazine-style layout with gap and rule.
Start with the reference example — three columns at 200px width using the columns shorthand.
Create a three-column layout with each column about 200 pixels wide.
<style>
.multicolumn {
columns: 200px 3;
}
</style>
<div class="multicolumn">
<p>...</p>
</div>columns: 200px 3 sets a 200px target width with a maximum of three columns — the browser balances both on available space.
Use a single integer to fix the number of columns with columns: 2;.
.two-columns {
columns: 2;
column-gap: 2rem;
}When you pass only an integer, the shorthand sets column-count and leaves width as auto.
Use width-only shorthand or combine columns with gap and rule properties.
Set only the target width — the browser decides how many columns fit.
.auto-flow {
columns: 18rem;
column-gap: 1.5rem;
}A single length value sets column-width only — ideal for responsive layouts without a fixed column count.
Combine columns with gap, rule, and a spanning heading.
.magazine {
columns: 220px 3;
column-gap: 2rem;
column-rule: 1px solid #e2e8f0;
}
.magazine h2 {
column-span: all;
margin-bottom: 1rem;
}The shorthand handles width and count; companion properties add spacing, dividers, and full-width titles.
columns WorksA block element holds paragraphs or other flow content.
Write width and count together, e.g. columns: 200px 3.
Text flows into the calculated number of columns at the target width.
Readable, magazine-style text columns with one concise declaration.
The columns property is widely supported in modern browsers, including Chrome, Firefox, Safari, Edge, and Opera.
All major browsers support the columns shorthand as part of the Multi-column Layout module.
Bottom line: Use the columns shorthand freely for multi-column text. Test combined width + count on different screen sizes.
The columns property is a powerful and convenient way to create multi-column layouts in your web design. By specifying the width and number of columns, you can easily control the flow and appearance of your content.
Experiment with different configurations to find the best layout for your content and enhance the user experience on your website.
columns: 200px 3 for balanced readable layoutscolumn-gap and column-rule for polishcolumn-span: all on headings inside column containerscolumns with Flexbox or Grid columnscolumnsUse these points when writing multi-column shorthand.
Width + count.
PurposeDefault value.
DefaultOne or two values.
SyntaxCommon pattern.
TipSeparate props.
RelatedOpen the HTML editor, set columns: 200px 3 on a text container, and preview the multi-column flow.
5 people found this page helpful