The column-fill CSS property sets how the contents of a multi-column element are balanced across its columns.
|balance||The content is equally distributed across columns, so that the height of each column is as close as possible to the same.|
|auto||The columns are filled sequentially, without any attempt to balance the contents.|
- When using column-fill: balance, ensure that the content is not too long or too short to be evenly divided into the specified number of columns.
- Use column-fill: auto when the content length is variable and you don't want to force a balance.
- Consider the layout of the content and the desired reading experience when choosing between balance and auto.
|Chrome||Firefox||Safari||Internet Explorer||Microsoft Edge||Opera|