Another way to break your text into columns is to specify the width that you’d like your columns to be; the browser will create more or fewer columns depending on the amount of available space. All we need to do is a quick CSS modification:

.multi-wrapper {
  width: 80%;
  -moz-column-width: 10em;
  -moz-column-gap: 1em;
  -webkit-column-width: 10em;
  -webkit-column-gap: 1em;
  column-width: 10em;
  column-gap: 1em;
}

The column-width property allows us to specify our desired column width—10em in the above CSS excerpt. Figure 5.4 shows the result in Firefox: a four-column layout. However, if we reduce the window size, the content is reformatted. Figure 5.5 demonstrates Firefox’s reduction of the content to two columns when we reduce the width of the browser window.

Figure 5.4. This screen width fits four columns in Firefox 3

Figure 5.5. As we drag in the browser window, the content displays as two columns

The following list details the other properties defined in the CSS3 multi-column layout module, along with their equivalent vendor specific extensions where appropriate:

The new properties introduced in this module are grid-columns and grid-rows. These allow the designer to create an explicit grid within a containing element—which could be the body, or a div, or other element as required. So, if you wanted a seven-column grid where each column is 10em wide, with a 1em gap between the columns, you’d specify this using the following CSS rule:

body {
  grid-columns(10em,1em,10em,1em,10em,1em,10em,1em,10em,1em,10em,
      1em,10em;
}

The grid layout that would be created by the above CSS is depicted in Figure 5.6.

Figure 5.6. Seven columns with gaps between them

Since this is a repeating pattern, we can also use the following notation instead of specifying all of the columns individually:

body {
  grid-columns(10em,1em)[7];
}

The [7] in square brackets after the column values means “repeat this pattern seven times.”

Likewise, grid-rows gives you the ability to specify the number of rows and their heights in your grid.

According to the working draft, we could also create our grid using the columns and column-gap properties, like so:

body  {
  columns: 7;
  column-gap: 10px;
}

This CSS would give us a grid of seven columns with a ten-pixel gap between them, and the columns would evenly stretch to the width of the container. In the case of a body with no width applied, they’d evenly stretch if the window was resized.

Of course, once you’ve created a grid, you’ll want to be able to position items along the grid lines. This is where grid positioning really comes into its own.

The Grid Positioning Module introduces a new length value: gr. This unit of length is to be used to specify how many grid units an element occupies. So the following CSS would cause the element with an id of promo to span four grid units, and be positioned one grid unit from the left:

#promo {
  position: absolute;
  left: 1gr;
  width: 4gr;
}

The result of this rule is shown in Figure 5.7. You’ll notice that the 4gr value for the width of the element includes the columns we specified as gaps.

Figure 5.7. The diagram showing the position of the element

There are several illustrated examples in the current working draft for this module, as well as further information about how it might be used. The working draft is worth a read, if you’re interested in where CSS might be taking us in the future—and it’s one of the more readable CSS3 documents.

Templates are created using the display property. Just as we saw with CSS tables, layout templates can be used for the whole layout or just a smaller element within a layout. For example, the following markup defines an unordered list with a class of box:

<ul class="box">
  <li>List item One</li>
  <li>List item Two</li>
  <li>List item Three</li>
</ul>

We’d like to display the list as three columns, and we’ll use the template layout properties to achieve this end. To set up the three-column template, we use the display property with a value of "abc", a letter for each template slot. This is, I’m sure you’ll agree, a bit of an odd departure from the usual use of the display property; however, each letter simply represents one slot in the template:

.box {
  display: "abc";
}

This module uses the position property to place elements into the slots. A letter that corresponds to the slot into which the element goes is used as the value for the position property, instead of the current keyword values, such as absolute and relative, that we’re used to. We’ll place our list items into their slots like so:

.box li {
  position: a;
}
.box li + li {
  position: b;
}
.box li + li + li{
  position: c;
}

The above CSS puts the first list item into slot a, the second into slot b, and the third into slot c. The result is shown in Figure 5.8.

Figure 5.8. Positioning into slots

One important point to note about this module is that, unlike CSS tables, you’ll have complete control over the source order of your markup. You could display these list items in any order you like; the first item can go into slot b and the second into slot c, for example.

CSS3 templates also allow far more complex grids to be defined. While each letter specified in the string value for the display property represents a slot, you can specify multiple strings to represent rows. Here’s a rule that specifies a grid of two rows with three columns:

body {
 display: "abc"
          "def";
}

You can also specify slots that span columns or rows using repetition; here, we specify that slot a should span three columns:

body {
 display: "aaa"
          "bcd";
}

CSS3 templates can be even more complex than that. We don’t have enough room in this book to speculate on all the possibilities, but we’ll conclude this section with an exciting example that demonstrates the real power of templates:

body {
  display: "a.b.c" /2em
           "a.d.e"
           5em 1em * 1em 10em;
}

Along with the letters, you can also include one or more dots (.) to indicate whitespace—that no elements can be displayed, as we’ve done above. We’ve also specified the height of the first row and the column widths. What the above rule creates is a two-row, five-column grid. The first row has a height of 2em. The first column is 5em wide and spans both rows; the second column is a 1em wide whitespace column, as is the fourth column. The last column is 10em wide. The central column has a flexible width, which is specified by an asterisk (*). This way, we achieve a level of layout control previously unheard of with CSS.

As with the grid positioning module, the template layout module is in an early stage of development. The working draft contains more examples and up-to-date information as to how this module might eventually take shape. If you’re interested in CSS3, do go and look at the examples in the working drafts; they are often far easier to understand than you might expect, as they aim to describe how something would work in practice. It may seem a bit complicated at first read, but a lot of that is because working in this way is quite a mental shift after being used to pushing things around using positioning and floating as we do currently.

If these examples have piqued your interest in the development of CSS3, a great site to visit and add to your RSS reader is css3.info. This site contains up-to-the-minute information about the status of different modules, and the state of browser support.