CSS3 LAYOUT CHOPS - Practical CSS3: Develop and Design - page 247

FIGURE 7.4 Demonstrating
the difference between auto
column fill (left) and column-
balanced column fill (right).
SPECIFYING HOW THE COLUMNS ARE FILLED WITH CONTENT
Another property you can specify, column-fill , can take two different properties,
auto and balance . auto is the default, which just makes the columns fill up left to
right and down to a certain length. This can cause an uneven result, as shown on
the left in Figure 7.4 . The better option is often balance , which fills in the content
as equally as possible across the columns, leaving less unsightly gaps, as shown
on the right in Figure 7.4.
section {
column-width: 20rem;
column rule: 3px solid #8B2101;
column-gap: 2rem;
height: 85rem;
column-fill: balance;
}