76 Chapter 7
Column Layout Methods
You can divide your content into columns using two methods: either pre-
scriptively, by setting a specific number of columns, or dynamically, by
specifying the width of columns and allowing the browser to calculate how
many columns will fit into the width of the parent element.
Note that, although Chrome, Firefox, Safari, and IE10+ all support the
properties in this chapter at the time of writing, the latter browser is the
only one to do so without a vendor prefix. The different browsers also have
a few implementation quirks, which I’ll point out as I go along.Prescriptive Columns: column-count
The simplest way to divide your content into equally distributed columns is
to use the column-count property:E { column-count: columns; }The element E is the parent of the content you want to divide, and the
columns value is an integer that sets the number of columns. For example, to
flow content inside a div element into two columns, you would use:div { column-count: 2; }Let’s move on to a real-world example. I’ll demonstrate a few para-
graphs of copy displayed twice, the first distributed over two columns and
the second over three columns. Here’s the code I’ll use:div[class*='-2'] { column-count: 2; }
div[class*='-3'] { column-count: 3; }noTe I’ve used the Arbitrary Substring Attribute Value Selector in these examples, which
I introduced in Chapter 3.You can see the results of this code in Figure 7-1.Figure 7-1: Text broken over two and then three columns