CSS column-fill

The column-fill property controls how content is distributed inside a multi-column layout. It decides whether columns should be balanced or filled one after another.

Syntax

column-fill: balance;
column-fill: auto;

Values

balance: tries to make columns similar in height.
auto: fills columns sequentially, which is most noticeable when the element has a fixed height.

Example

.article-preview {
  columns: 3 12rem;
  column-gap: 2rem;
  column-fill: balance;
}

Result:

Multi-column text can become easier to scan when each column has a similar amount of content. The browser balances the columns when there is enough space.

Browser and layout notes

Multi-column layout is best for flowing text, not for precise card grids. If each item must stay together with exact placement, CSS Grid is usually a better tool.

Use column-fill after deciding the column count, width and container height. Without those constraints, the browser may already produce a balanced result.

Choosing balance or auto

Use balance when the goal is a readable article-style layout with columns of similar height. Use auto when the container height is constrained and you want content to fill one column before continuing into the next.

If you are arranging independent cards or controls, use CSS Grid instead. Multi-column layout is designed for flowing content, not dashboard masonry.

Common mistake

column-fill: auto often appears to do nothing unless the multi-column container has a constrained height.