columns

columns is the shorthand for a multi-column flow. Its established width/count syntax can request an ideal width and a maximum number of columns together.

Request two columns

Columns:2 supplies a count and resets the omitted ideal width to auto. The prose flows down each column in order.

<div class="reading">
  <p>
    Begin with a small document. Add a heading and a paragraph. Check the
    reading order before changing the appearance.
  </p>
  <p>
    Give the container room to show the layout. Change one value at a time, then
    compare the result with the original.
  </p>
  <p>
    At a narrow width, keep the text readable. A layout that works on a large
    screen may need fewer columns on a phone.
  </p>
</div>

.reading {
  columns: 2;
  column-gap: 1.5rem;
}
p {
  margin-top: 0;
}

Combine an ideal width with a maximum count

Columns:12rem 3 requests columns around 12rem and caps their count at three. Fewer fit at narrow widths; 12rem is not an exact track size.

<div class="reading">
  <p>
    Begin with a small document. Add a heading and a paragraph. Check the
    reading order before changing the appearance.
  </p>
  <p>
    Give the container room to show the layout. Change one value at a time, then
    compare the result with the original.
  </p>
  <p>
    At a narrow width, keep the text readable. A layout that works on a large
    screen may need fewer columns on a phone.
  </p>
</div>

.reading {
  columns: 12rem 3;
  column-gap: 1.5rem;
}
p {
  margin-top: 0;
}

Syntax and resets

The established syntax accepts a positive width length and/or positive integer count in either order, with auto for unspecified components. Initial width and count are auto, and the shorthand is not inherited. A later columns:2 resets an earlier column-width; use a longhand when changing just one component.

Current specifications and MDN also document a newer column-height component, written after a slash, with column-wrap reset behavior. That extended syntax has its own compatibility rows; it should not be assumed supported merely because width/count columns are supported. These examples intentionally use the established width/count syntax.

Common mistakes

Columns are continuous fragments of content, not independent cards. Use Grid when each child should occupy its own track. The shorthand does not set column-gap or column-fill, so choose those separately. Fixed heights can generate extra overflow columns and an awkward reading path.

Learn column-width, column-count, and column-fill.

Sources and browser support

MDN: columns describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.