960 Grid System Template
This template is based on the 960 grid system of web design. The template has twelve 50 pixel columns separated by 30 pixel gutters. See the content examples below for examples on how to use the 960 Grid System.
How the 960 Grid System Works
Using the 960 Grid System makes it easy to create custom web pages using common measurements and dimensions. The template's 12 column grid consists of the following columns:
The CSS classes are already included for creating any layout combination based on the above columns!
A 2-column Example
To create two equal columns the full width of the page, the HTML code is:
<div class="grid_6"> left column content </div>
<div class="grid_6"> right column content </div>
The above code with some additional content text will display as:
This is a heading
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
This is a heading
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
A Left Sidebar Example
To use a left sidebar and the majority of the right side of the page for content, use grids 3 and 9 or 4 and 8. See how the two content classes add up to 12? That's how the 960 Grid System works!
Class="grid_3"
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Class="grid_9"
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
A Right Sidebar Example
If you want your page to use a right sidebar instead, reverse the order of the grid classes.
Class="grid_9"
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
Class="grid_3"
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
A Three-Column Example
You can use as many divs as you want, as long as you don't exceed 12 columns across your page.
Class="grid_3"
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Class="grid_7"
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
Class="grid_2"
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
A Four-Column Example
Class="grid_3"
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
Class="grid_3"
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
Class="grid_3"
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
Class="grid_3"
Cras et dapibus magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent dolor neque, gravida sed tempus a, vehicula nec metus. Cras accumsan ultricies sapien id tincidunt. Etiam vitae ante quis lectus pulvinar
12 Column Grid
Below are show all the 12 columns and the possible 2-column combinations. View the source code for this page to see how the columns were created using the 960 Grid System.
930px
50px
850px
130px
770px
210px
690px
290px
610px
370px
530px
450px
450px
530px
370px
610px
290px
690px
210px
770px
130px
850px
50px