HTML and CSS Reference
In-Depth Information
Figure 18-8.
The image is rescaled to fit within the column box
Controlling How Columns Are Filled
The
column-fill
property determines how to fill the columns. It accepts either of the following values:
balance
This is the default. It instructs the browser to try to balance the columns, so
that each one appears to have the same amount of content.
auto
This instructs the browser to fill the columns sequentially. Some columns might
end up partially filled or with no content at all.
At the time of this writing,
column-fill
does not appear to be supported by any browser.
Dealing with Column Breaks
The
break-before
,
break-after
, and
break-inside
properties perform a similar role to the page break print
properties described in Chapter 16. But they're not only concerned with printing; they also control column
breaks onscreen.
When a multi-column element is printed out, each page break is treated as beginning a new row of columns
so each page is complete in itself. Figure
18-9
illustrates this principle.