← go to Typography demo
This is basic building block – 1.5em square:
All your widths, heights, margins and paddings should be an integer multiple of this block.
How wide is this (59 blocks) depends on the font you use and the base font-size you setup in BODY. In this setup, it's about 960px.
Use this grid to see where does your em-grid fit into browser window sizes. These days, you'll be shooting for 1024x768, which means that your grid should end somewhere between 960–990px.
Each column is 9-blocks wide (13.5em), with 1-block space in between (59 blocks total).
Each column is 18-blocks wide (27em), with 2-block space in between (58 blocks total).
Consists of 15em, 45em and 18em columns with 3ems on either side (58 blocks total).
I can continue more with this, but it's not really needed. If you check the source code, you'll see strange looking class names like g-c18-w2. Do you really want to build a website using such names?
Use regular names – like top, main, footer – and just calculate widths you need using the base grid unit.