Layout
column-width
column-width sets the ideal width of columns in a multi-column layout. The box gets as many columns as fit, so the number of columns follows the box width without media queries.
Syntax
auto | <length [0,∞]>Preview
Code
.box {
column-width: 6em;
}Controls
About
Values
auto: no column width. This is the initial value (ifcolumn-countis set, the width comes from that count).- A length: the ideal column width. Percentages and negative values are not allowed.
How the number of columns is found
Columns are not exactly column-width wide. The browser makes as many columns as it can without any being narrower than column-width, then widens them equally to use the leftover width. When the box is narrower than column-width, there is a single column as wide as the box.
The preview on this page puts column-width on the sample text box. Drag the bottom right corner to resize it and watch the number of columns change.
Combining with column-count
With column-count set too, there are at most that many columns. The columns shorthand sets both, as in columns: 12em 3. The space between columns is set by column-gap and counts toward the column width calculation.