The Book of CSS3 - A Developer\'s Guide to the Future of Web Design (2nd edition)

Multiple Columns 79

WArninG When using the auto value, it may appear that you have fewer columns than are
specified in the column-count property, but that won’t be the case; it’s just that some
columns would be empty.

You can see an example of the auto value for column-fill in Figure 7-4;

the first two columns have an equal number of lines and the third has three

fewer, as the text is simply flowed into the columns without the browser try-

ing to balance them.

Figure 7-4: Content flowed into columns with the auto value for the column-fill property

Firefox and IE10+ are the only browsers to implement this property

currently, although Chrome and Safari automatically act as if the auto value

were applied when a height is fixed on the parent.

Combining column-count and column-width

You can set both column-count and column-width properties on an element,

though, at first, you might think doing so would create a conflict. This pos-

sibility has been taken into consideration, however: If both properties are

applied to the same element, the column-count value acts as a maximum. To

illustrate, let’s refer to Figure 7-2 but change the CSS to also include the

column-count property:

.columns {

column-count: 3;

column-width: 150px;

}

Here is the logic behind this: divide the text into columns of 150px

each, unless that would create three or more columns, in which case make

three columns with a minimum width of 150px.

If you refer back to the example shown in Figure 7-2, you’ll remember

that, given the parent element’s width of 710px, the column-width property

rendered four columns. As you’re applying both properties on the same ele-

ment, however, the column-count property takes precedence and only three

columns are distributed, with their widths dynamically altered to best fit the

parent element. You can see the result in Figure 7-5.