column-width

When you want to keep your columns at a specific width, use column-width.

section {
-webkit-column-width: 200px;
   -moz-column-width: 200px;
        column-width: 200px;
}

The browser will calculate how many columns of at least that width can fit in the space. Think of column-width as a minimum width suggestion for the browser.

column-width is a flexible property. Once the browser cannot fit at least 2 columns at your specified width then the columns will stop and drop into a single column.

This property is also used in the shorthand for columns and can be used in tandem with column-count. When both properties are declared column-count is the maximum number of columns.

Values

You can set column-width to auto or a length.

Use auto if you are also using column-count or if you need to turn off the property. Think of it as a way of telling the browser to let column-count take the lead.

To specify the width of the columns, use a length greater than (or equal to) 0. You can use any CSS unit except for percentage.

Related Properties

• columns
• column-count
• column-fill
• column-gap
• column-rule
• column-span

Additional Resources

• MDN Docs
• CSS3 Spec
• Can I Use

Browser Support

Multi-column layout support:

Don’t forget your prefixes!