Home >CSS >CSS reference – properties, selectors, functions >columns

columns

columns: width || count

A shorthand for column-width and column-count. The content of the element flows as in a newspaper: it fills the first column, continues in the second and the columns are balanced to a similar height. With a width (columns: 200px) the columns adapt to the space by themselves – one remains in a narrow window, there are more in a wide one.

Values

3 – three columns regardless of the width.
200px – as many columns at least 200 px wide as fit; the columns then stretch across the full width.
200px 3 – like the previous one, but at most three columns.
auto – no columns.

Initial value: auto auto. Inherited: no. Applies to: block containers (not tables).

Examples

Text in columns at least 160 px wide – at a window width of 390 px one column remains:

<div class="columns">
  <p>Columns suit short texts, lists of links or tags. The browser divides the content so that the columns have a similar height. When the window gets narrower, there are fewer columns. A long article in columns, however, would force the reader to scroll the page up and down.</p>
</div>

.columns {
  columns: 160px;
  column-gap: 24px;
  max-width: 560px;
  font-size: 14px;
  line-height: 20px;
}
.columns p { margin: 0; }

result

Columns suit short texts, lists of links or tags. The browser divides the content so that the columns have a similar height. When the window gets narrower, there are fewer columns. A long article in columns, however, would force the reader to scroll the page up and down.

Things to watch out for

The width in columns is not the exact column width, but the minimum – the columns stretch to fill the whole element. In a narrower element one narrower column appears.
Long text in columns taller than the window forces the reader to scroll down and back up to the next column. On screen, columns suit only short blocks.
Elements are split between columns. break-inside: avoid keeps a card or an image with a caption together.
A heading is stretched across all columns by column-span: all.

Browser support

Baseline – widely available: in all major browsers since March 2017, considered widely available since September 2019. Since version: Chrome 50, Firefox 52, Safari 9. As of October 2026 (MDN browser-compat-data).