The
column-width property is to set min-width for your columns. The browser will include as many columns of at least the given width as it can to fill up the element—up to the value of the column-count property.
For example, if we have a parent that is 400 pixels wide, a 10-pixel column gap, and the column-width is declared as 150px, the browser can fit two columns:
(400px width – 10px column gap) ÷ 150px width = 2.6
The browser rounds down to two columns, making columns that are as large as possible in the allotted space; in this case that’s 195px for each column—the total width minus the gap, divided by the number of columns. Even if the column-count were set to 3, there would still only be two columns, as there’s not enough space to include three columns of the specified width. So the column-count property specifies the maximum column count.
If the parent element itself is too narrow for a single column of the specified width, the columns will be narrower than the column-width. So you’ll have one column that fills the whole parent element.
snippet
#primary article .content,
#tertiary article .content {
-webkit-column-width: 9em;
-moz-column-width: 9em;
column-width: 9em;
}
If you increase the font size in your browser, the number of columns will be decreased as required to maintain a minimum width. This ensures
readability.
Note:
Note
Declare your column-width in ems, to ensure a minimum number of characters for each line in a column.
