The Source Cookbook

What is a grid system?

It may seem complicated, but a grid system is just a CSS file that defines a set of styles that help to organize the contents of your website. You can think of it as a grid sheet.

In the image above, you can see how woothemes.com has used the 960 Grid System; all the elements in the page fit in the grid.

How to use a Grid System?

It is really easy: The first thing you need to do is to download a .css file that will contain the 960 Grid System. You have two options to get it:

1. You can create a personalized version from this site: Variable Grid System. The good thing about this method is that you can customize the grid to your own needs. I recommend to use this method and, judging by the huge link in their website, the creators of the 960 GS are OK with that.
2. You can download the official version from their repository. At the same time, you will obtain some examples and documentation, but you will not have the same flexibility that the Variable Grid System offers.

For this example, I have created a twelve columns grid with 50 pixels wide columns and a gutter width of 30 pixels. Once you have downloaded it, you need to put the grid.css file in the folder where you are working. Also, put in that folder the initial HTML and CSS files with the following content:

example.css:

­

example.html:

­

And this is how it should look before using the grid to give some structure to the content:

Now that we have some dummy content, we can start using the grid system to give a good structure to this content with almost zero effort.

Let's start with the top of the page. I want to place the facebook badge at the top left of the page. To get that, I just need to apply a few styles from the grid system:

­

The container_12 class activates the grid styles in all the elements inside that div.

grid_10 means that a > div should be 10 columns wide and grid_2 means 2 columns wide. In general, you can use grid_1 to grid_12 styles to set the widths of the elements on the page.

push_2 pushes an element two columns to the right and pull_10 pulls the element ten columns to the left.

Notice that, if you want to use the whole the width of the page, all divs inside a container_12 should have a total width of 12 columns, as you may have expected.

You should have something like this:

Now, you just need to use the same technique to style the rest of the page:

­

And here is the final result:

As a conclusion:

As a conclusion, I would like to emphasize that the 960 Grid System is a simple, easy and powerful way to organize the content of your sites if you don't want to spend a lot of time or you just are not very experienced with CSS.

If you have any doubts or anything to comment on this article, you can contact me at twitter (@miguelSantirso) or by e-mail: miguel.santirso at gmail.

Insertar: