The grid

Simplicity and flexibility

Grid-based layouts are generally more aesthetically pleasing and balanced than those not based on grids. Using a grid provides shortcuts to decisions the designer or developer of a page needs to make when approaching a new type of page or tool.

This grid

1 Content width of 968 pixels

Only a little more than the existing 960 pixels used, but with much more flexibility.


2 Based on 24 columns of 25 pixels

Each column has a 16 pixel gutter. Joined columns add up to 41 pixels. White space is easy to find. The whole page should be centred.

3 24 columns = 12, 8, 6, 4, 3 and 2 columns

For maximum flexibility the page may be divided into many regular columns easily.

12 columns
8 columns
6 columns
4 columns
3 columns

For text (but not graphical or spacial elements) readability can be further improved by having a double gutter on the right-hand side of a column. With ragged edge text this does note have a big impact on line length, but helps add space.

4 Big screens

We will set up a media query for window sizes larger than 1230 pixels. This can accommodate a 24 column grid of 32px + 20px gutters, with all dimensions multiplied by about 1.25x in size -


For bigger screens - 24 x 32 pixel wide columns with 20 pixel gutters

Email this page Print this page