960 Grid System Tutorial
Using 960 Grid System
Including the CSS Files
When you download the zip file from 960.gs, it comes with many useful files. There are template files for various design programs (allowing you to draw designs that fit the grid), and a sketch sheet for hand drawn prototypes. In the code directory there is an example page, an image and a css directory. Extract the contents of the CSS directory into your project.
In the CSS directory there are the files 960.css, reset.css and text.css. 960.css is the main framework, however the reset.css and text.css are incredibly useful, as they will reset the the text and layouts so that they are consistent across different browsers. It is recommended to include all 3 of them in your website. These are linked to in the same way that you have linked style sheets to web pages in the past.
Finally, you want to create your own style sheet, and make sure that is linked in the html after the rest of the style sheets. This will mean that any styles you create will override the styles which have been set in the previous style sheets.
Creating the Container
The first thing that 960GS requires is a container, which is how it is told the number of columns that will be used on the page. This is done by setting the container element (normally a div) a class of container_XX (the XX can be either 12 or 16 depending on which number of columns you want the grid to have). This will then automatically be set to the width of 960px, and allow you to position elements within it.
<body>
<div class="container_16">
...
</div>
</body>
Note: An element can have multiple classes, so if you want the container (or any item on the page) to be a member of another class as well, you can. All classes are defined within the “class” attribute, and separated by spaces.
Setting Element Sizes
Once the grid container has been set up, it is possible to specify element sizes within very easily by setting the class of the element to the number of columns it should cover with the class grid_XX (XX being the number of columns).
<body>
<div class="container_16">
<div id="menu" class="grid_3">
<p>This is my menu bar.</p>
</div>
<div id="content" class="grid_13">
<p>Main content.</p>
</div>
</div>
</body>
example
This is a simple 2 column design, which has the first column as a menu (which is 3 grids wide: 160px), and a main content (13 columns wide, 760px). As long as the total width of the columns is not greater than 16 (or 12 on a 12 column grid), these div elements will float next to each other. This can be done for any number of elements.
