8Grids & columns

Now you may wonder why I keep talking about a grid when I really mean columns. It’s because I want to be able to have different arrangements within a single web page; I want, for example to be able to start the page with three columns and then later on have two columns and later still four columns. In short, I want to be able to do whatever I want, something like the arrangement in Figure 8.2.

Here there are five separate rows, each with a different arrangement of columns:

Row 1 is the arrangement I want for the site, it uses the 5 column Gerstner grid, the column on the left spans 1 column of the 5 columns available (hence its designation 1-5 in the rg-span1-5 name I’ve given it). The middle column spans 3 of the 5 columns (and has the designation rg-span3-5). The column on the right is the same as the column on the left; it spans 1 of the 5 columns and again has the name rg-span1-5.

Row 2 is based on a 3 column Gerstner grid, the first column spans 2 of the 3 columns (and has the designation rg-span2-3), the second column spans 1 of the 3 available and is called rg-span1-3.

Well you get the idea; I won’t go through the rest.

Figure 8.2   Multiple column arrangement

The names I’m giving each of these columns: rg-spanS-C are deliberate, the rg just stands for responsive grid (there really is no limit to my imagination). The two numbers S and C indicate the span (S) and number of columns in the row (C).

So rg-span2-5 indicates that the particular column will span 2 of 5 columns.

In any given row, the C number must be the same for each column and the total of the S numbers in the row must equal the C number.

This can be seen in Figure 8.2; take row 4, the columns are designated:

	rg-span1-6	rg-span2-6	rg-span1-6	rg-span2-6

So there are four columns with the spans 1, 2, 1, 2 and:

Or, with the numbers:

And this is true of every row, row 2 has two columns based on a three column grid, the row span numbers 2 & 1 add up to the column number 3.

Get the idea?

The rules are:

1. The last number in the column name (C) must be the same for every column in the row

2. The total of the first numbers in each column (S) in the row must add up to the last number (C)

It will probably come as no surprise to you, but these names (rg-span2-5, rg-span1-6, &c.) will be class names in the grid.css file.