CSS column-width Property

Definition and Usage

The column-width property sets the ideal width of columns in a multi-column layout. The browser fits as many columns as it can without normally making them narrower than that preferred size.

Use a length such as 12rem or 18ch, or auto (the initial value). It is not inherited. You can also set it through the columns shorthand. Pair it with column-gap for spacing. Unlike column-count, it favors readable line length and lets the column count change with container size.

CSS Syntax

One keyword or a positive length. Examples: auto, 120px, 12rem, 18ch.

Property Values

How to Use column-width

Pick a comfortable column size and let the browser decide how many columns fit.

1. Choose a block container for flowing text (an article or section).
2. Set column-width to a positive length such as 12rem or 18ch.
3. Optionally add column-gap and column-rule.
4. Use column-count as well if you need a hard maximum number of columns.

Live Preview

Only column-width changes. Resize the page to see columns appear or disappear.

CSS Examples

Each snippet focuses on column-width. Extra rules are only there so the columns can show. Use Try It Yourself for a live editor.

<style>
  article {
    column-width: 120px;
  }
</style>

<article>
  <p>Text flows into as many columns as fit at about 120px each. Widen the window to see more columns appear.</p>
</article>

<style>
  article {
    column-count: 3;
    column-width: auto;
  }
</style>

<article>
  <p>Three fixed columns. Width is auto, so each column shares the available space.</p>
</article>

<style>
  article {
    column-width: 18ch;
  }
</style>

<article>
  <p>About eighteen characters per column. The browser adds more columns when the box is wide enough.</p>
</article>

Key Takeaways