HTML and CSS Reference
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.
column rule: 3px solid #8B2101;