# column-width property

The `column-width` property specifies a width of columns in multi-column text. The property value is any size units, except percentages, or the `auto` keyword (by default). With the `auto` value, the browser itself selects the optimal column width based on `column-count` and `column-gap`.

## Syntax

`selector { column-width: value; }`

## Example . Specified width

In this example, the `column-width` is `150px`, and `column-count` is equal to `auto`. As a result, the width of the columns will be `150px`; the browser will select their number and the gap between them:

`<div id="elem"> some long text </div>` `#elem { column-count: auto; column-width: 150px; text-align: justify; }`

:

## Example . The auto value

In this example, the text will be divided into `3` columns (since `column-width` is set to `3`), but their width will be calculated automatically:

`<div id="elem"> some long text </div>` `#elem { column-width: auto; column-count: 3; text-align: justify; }`

:

## See also

- the `column-count` property
  that specifies a number of columns
- the `column-gap` property
  that specifies a gap between columns
- the `column-rule` property
  that specifies a border between columns
- the `column-span` property
  that specifies a number of columns an element should span
- the `columns` property
  that is a shorthand property for multi-column

← →
↑
en ru