Toggle Background Grid On or Off

It is divided into 24 columns of equal width (40px).

Each column has a margin of 10px and a padding of 5px.

Expanded, each column of the grid looks like the image »

You can see the actual size grid columns on this page by toggling the grid on or off.

Why Margin and Padding?

A number of designs for UAlberta have shaded content boxes with borders. In order to match the outside of content boxes and the content within the box, a padding is used to space the cotent from the edge of the box.

How do you fit content inside a 10px space?

You don't.

The reason for using a 24 colums grid is to provide more options for placing content. Content will almost always be contained in areas that span more than 1 grid column. Columns that do span more than 1 column gain more space because the margin and padding between 2 columns is combined creating an addition 30px of space.

3 Columns Combined

3 Columns Combined with Content Area Merged

Creating any content area, including the 1,2 and 3 column layouts, is done by using combined columns.