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
| Value | Description |
|---|---|
| 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. |
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
| Chrome | Firefox | Safari | Internet Explorer | Microsoft Edge | Opera |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |