CSS column-fill Property

CSS column-fill Property

The column-fill property in CSS controls how content is distributed across columns in a multi-column layout. It determines whether columns should be filled equally or left unevenly.

1. Syntax

selector {
  column-fill: auto | balance;
}

Value	Description
auto (default)	Fills columns sequentially, meaning one column may be taller than others.
balance	Tries to evenly distribute content across columns.

✅ Works only in paged media (like print) or with fixed-height containers.

2. Example – Using column-fill: balance;

.columns {
  column-count: 3;
  column-fill: balance;
  height: 300px;
  overflow: hidden;
}

<div class="columns">
  <p>Text is evenly balanced across three columns.</p>
  <p>Each column will have roughly the same height.</p>
</div>

✅ Ensures all columns are evenly distributed.

3. Example – Default column-fill: auto;

.columns {
  column-count: 3;
  column-fill: auto;
}

✅ Columns will be filled one after another, leaving some columns taller than others.

4. When to Use column-fill?

✔ Use balance for equal-height columns in fixed layouts.
✔ Use auto when natural content flow is preferred.
✔ Works best in paged media (print layouts).

5. Best Practices

✔ Ensure height is set when using column-fill: balance;.
✔ Combine with column-gap and column-rule for better layout design.
✔ Check browser compatibility, as column-fill is not fully supported in all browsers.