1. css
  2. /properties
  3. /column-fill

column-fill

Definition

The column-fill CSS property sets how the contents of a multi-column element are balanced across its columns.

Examples

Auto:

column-fill: auto;

Balance:

column-fill: balance;

Values

ValueDescription
balanceThe content is equally distributed across columns, so that the height of each column is as close as possible to the same.
autoThe columns are filled sequentially, without any attempt to balance the contents.

Best Practices

  • 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.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes