column-width

column-width requests an ideal column width. The browser chooses how many columns fit and adjusts their actual widths to use the container. It is not a fixed width for every column.

Let columns adapt to available width

Resize the preview. A 12rem ideal allows fewer columns when the container narrows, and a single column may be narrower than that ideal.

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

Cap a reading layout at two columns

The ideal width and count work together: the browser fits columns around 14rem but never requests more than two.

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

Values and defaults

The initial value is auto and the property is not inherited. Use auto or a strictly positive length. Zero, negative lengths, and percentages are invalid. Auto lets column-count and other layout conditions determine width.

Common mistakes

Actual columns may be wider to fill remaining space or narrower when only one can fit. A non-auto column-count caps the number. Long unbreakable tokens can still overflow; column width is not a text-wrapping rule. Avoid assuming that a preferred width guarantees readable columns at every font size.

Learn column-count, column-gap, and overflow-wrap.

Sources and browser support

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