1200px Grid System

Why 1200?

All modern monitors (mostly wide-screen) support at least 1280 x 1024 pixel resolution. In January 2010 76% of the computers where using a resolution higher than 1024 x 768 px.
1200 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 40, 48, 60, 80, 120, 150, 200, 240 and 400. This makes it a highly flexible base number to work with.
The 1200px Grid System is based on the 960 Grid System of Nathan Smith.


 

Supporting designers and developers

For rapid prototyping with this standard, we provide some templates for graphical designers (Photoshop) and web developers (CSS).

downloadDownload Photoshop File

downloadDownload Illustrator File

downloadDownload CSS File

Variable grid

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 1200px Grid System.
Just use the code <DIV class=container_15> to get a 15 column wide container and add <DIV class=grid_5> (or another number) to divide the container in columns.


Content width:
 

Full width:
 

Variable CSS Fixed

downloadDownload CSS File

1200px Logo