80 Chapter 7
Figure 7-5: When combining column properties, column-count acts as a maximum.If you want to use these two properties together, a shorthand property
is available:E { columns: column-width column-count; }So if you were to use the values from Figure 7-5 with this shorthand
property, it would look like this:div { columns: 150px 3; }Column Gaps and Rules
When using a prescriptive multi-column layout, the browser should place a
default 1em gap between each column. You can, however, alter that default
and specify your own distances by using two new properties: column-gap and
column-rule.
The first property, column-gap, sets the space between columns, and its
syntax is simple:E { column-gap: length; }The length value is any number with a standard CSS length unit. Here’s
an example that puts a 2em gap between each of your generated columns
(though not on the outside of either the first or last column):div { column-gap: 2em; }The second property, column-rule, draws a line, similar to a border,
equidistantly between columns. The syntax for column-rule is actually short-
hand for three subproperties: column-rule-width, column-rule-style, and
column-rule-color. These subproperties take values in exactly the same way
as their equivalent border-* properties from CSS2. Here’s the syntax:E {
column-rule-width: length;
column-rule-style: border-style;
column-rule-color: color;
column-rule: length border-style color;
}