CSS column-width Property

What You’ll Learn

The column-width property sets the ideal width of each column — the browser then fits as many columns as the container allows.

Definition and Usage

The column-width CSS property specifies the optimal width of columns in a multi-column layout. It lets you control column width while the browser determines how many columns fit the available space — a flexible way to create responsive, visually appealing layouts.

Unlike column-count, which fixes the number of columns, column-width focuses on readable line length. On a wide screen you may get three or four columns; on a narrow screen the layout may collapse to one or two.

📝 Syntax

The syntax for column-width accepts a length value or auto:

selector {
  column-width: value;
}

Basic Example

.columns {
  column-width: 200px;
}

Here, value can be any valid CSS length unit such as px, em, rem, or ch.

Syntax Rules

• The initial value is auto — the browser chooses column width.
• Browser creates as many columns as fit at the specified width.
• Can be combined with column-count to cap the maximum number of columns.
• Works with column-gap, column-rule, and column-span.
• Part of the columns shorthand: columns: 200px 3; (width and count).

💎 Property Values

The column-width property accepts length values and auto.

column-width vs column-count

Examples Gallery

Try 200px columns, rem-based readable width, column gap spacing, and a width + count combo.

<style>
  .columns {
    column-width: 200px;
  }
</style>

<div class="columns">
  <p>...</p>
</div>

.readable {
  column-width: 18rem;
  column-gap: 2rem;
  line-height: 1.6;
}

.spaced-columns {
  column-width: 220px;
  column-gap: 2rem;
  column-rule: 1px solid #e2e8f0;
}

.balanced {
  column-width: 200px;
  column-count: 3;
  column-gap: 1.5rem;
}

💡 Best Practices