The 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;
}

The column-width property

Syntax

Example . Specified width

Example . The auto value

See also