8Grids & columns

What do I mean by responsiveness? Well, there are three things really; the first is I want the size of text (the font-size) to change as the website gets narrower, the same is true of headings and images (everything on the web page really) — I look at how this is done in § 10.1.

The second thing is the columns on the page, I want these to get narrower as the width of the web browser decreases, but I want their ratios to each other to stay the same — I want them to get thinner in the right proportions.

The third thing is this: if the browser is below a specific width, I want the columns to stack up one on top of the other. This is quite a common feature of responsive websites; it is referred to as column collapse. It works like this:

If the browser is wider than 1276 px (remember we set the body style to have a maximum width of 1276 px), the columns display at their maximum width (Figure 8.3):

If the browser width is reduced, the columns become thinner but remain in the correct proportion to each other, Figure 8.4 (the outside cream area disappears when the browser width is less than 1276 px — the maximum width of the body area, see § 7.4.3)

This will continue until the columns become too narrow to be practical; I will set this at a width of 520 px — below this width, the columns collapse and become stacked, Figure 8.5 (the more pedantic among you might think they become rows at this point):

The columns will always stack in order from left to right; if there were four columns it would work like this, Figure 8.6:

Once the columns collapse, they are all set to be the same width as the browser window.

The column area has an effective maximum width or 1276 px, this is set by the body style in the style.css file (§ 7.4.3), it is the max-width property:

body {
    max-width: 1276px;
    ...}

I explain in detail why I’m using a width of 1276 px in § 3.3.1; but I’ll recap here:

The Gerstner grid uses a grid that is 58 units wide and this means that whatever screen width is used it must be wholly divisible by 58; from website statistic I determined that the maximum screen width should be no more than 1280 px. The nearest multiple of 58 to 1280 happens to be 1276 (22 × 58 = 1276).

So the maximum screen width is 1276 px. It also means that the unit size in the Gerstner grid is 22 px. These will be important numbers when it comes to building the grid.css file; and that is the next social event.