column-fill

column-fill decides how content is distributed across columns. Auto fills them sequentially; balance tries to share content. An explicit height makes the difference easier to observe.

Fill the first column before the next

The container is 180px tall. With auto, the first column fills toward that height before content continues in the next.

<div class="reading">
  <p>
    Begin with a small document. Add a heading and a paragraph. Check the
    reading order before changing the appearance.
  </p>
  <p>
    Give the container room to show the layout. Change one value at a time, then
    compare the result with the original.
  </p>
  <p>
    At a narrow width, keep the text readable. A layout that works on a large
    screen may need fewer columns on a phone.
  </p>
</div>

.reading {
  columns: 2;
  height: 180px;
  column-fill: auto;
  column-gap: 1.5rem;
}
p {
  margin-top: 0;
}

Balance a short two-column passage

The same passage and height use balance. The browser tries to divide the passage more evenly instead of filling the first column to its limit.

<div class="reading">
  <p>
    Begin with a small document. Add a heading and a paragraph. Check the
    reading order before changing the appearance.
  </p>
  <p>
    Give the container room to show the layout. Change one value at a time, then
    compare the result with the original.
  </p>
  <p>
    At a narrow width, keep the text readable. A layout that works on a large
    screen may need fewer columns on a phone.
  </p>
</div>

.reading {
  columns: 2;
  height: 180px;
  column-fill: balance;
  column-gap: 1.5rem;
}
p {
  margin-top: 0;
}

Values and defaults

The initial value is balance and the property is not inherited. Auto fills sequentially and may leave later columns empty when there is little content. Balance equalizes content where possible, subject to break constraints. In paged/fragmented contexts, balance applies to the last fragment rather than promising to balance every page. The specification’s balance-all has separate implementation status; do not treat it as a dependable equivalent.

Common mistakes

Without a constrained height, engines can handle auto differently, so an unconstrained short demo may not show the intended contrast. Too much content for the height can form overflow columns; do not silently clip them. Avoid a fixed-height multicol layout for essential long prose unless navigation and reading order are usable.

Learn column-count, columns, and overflow.

Sources and browser support

MDN: column-fill describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.