column-count

column-count requests a number of columns for continuous content. Unlike Grid, it flows the same content through those columns rather than placing independent items in tracks.

Flow prose into two columns

Read down the first column and continue at the top of the next. Column-fill’s default balance distributes the content when layout conditions allow.

<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 {
  column-count: 2;
  column-gap: 1.5rem;
}
p {
  margin-top: 0;
}

Limit the number while preserving an ideal width

Column-width requests 12rem and column-count caps the count at three. At a narrow viewport, fewer columns fit; they do not remain three cramped columns.

<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 {
  column-count: 3;
  column-width: 12rem;
  column-gap: 1.5rem;
}
p {
  margin-top: 0;
}

Values and defaults

The initial value is auto and the property is not inherited. Use auto or a strictly positive integer; zero, negative values, and fractional counts are invalid. With a non-auto column-width, the count is a maximum, not a promise of that many columns.

Common mistakes

Equal column heights are not guaranteed: column-fill, available height, break constraints, and content length affect balancing. A fixed-height multicol container may create overflow columns, which need careful navigation. Multi-column prose can require scrolling down and back up; short text or a single column may be easier on small screens.

Learn column-width, column-fill, and grid for independent layout tracks.

Sources and browser support

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