Balanced columns
column-fill
This property can be specified in order to create columns with equal amounts of text.
Property values
Specify one of these keywords:
| auto | Columns are filled with text from the top of each column to the bottom of each column, left to right until there is no more text, or until there is no more available space. * |
| balance | The total space needed for all of the text is divided by the number of columns, and evenly split between them, making the columns shorter than the container's height. If the height is insufficient for all of the text, it is clipped after the last column. |
| balance-all | Same as balance except when used with printed output, in which case all pages are balanced. |
Note that this property only takes effect when the column container has a specific height.
* The auto setting will leave a large gap of unfilled column space if there isn't enough text to fill the columns, and it will clip the text at the last column if there is too much text.
Examples
.multi-column-layout {
column-count: 2;
column-fill: balance;
height: 9in;
}