This post was Written by Juan Sebastián Celis Maya, of Evolucionemos.com and Sebascelis.com.
Have you ever wondered why some websites looks so neatly organized and styled? Maybe the information is very well distributed…but what make those websites special?
Well, actually there is a secret!
Most of them use something called “grids“. So what’s a grid?
In Web Design, a grid is composed of just a CSS file; and it’s purpose is to provide a framework for specially sized content containers for text, images, or whatever else that would go on your site.
The most famous, and perhaps best grid system is the 960 Grid System created by Nathan Smith.
But before you start with your own, I will explain the grid and how to use it.
What really defines this grid system is the width: 960 pixels wide.
This width is great because 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.
Let me clarify that there are two versions of this grid to work with; the 12 Column grid and the 16 Column.
I personally like the 12 Column grid, but you can use whichever you suites your needs.
How to Do It
To make things more easy, its best to start with a new design.
The next step is to download the grid’s css: 960 Grid System CSS File
Create a new HTML file that looks something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Your Title Here</title>
<link rel="stylesheet" href="960.css" type="text/css" />
</head>
<body>
<div class="content">
the content will be here
</div>
</body>
</html>
As you can see, we added this line in the section to call the 960.css file:
<link rel="stylesheet" href="960.css" type="text/css" />
It depends on where you have the file, but if it’s at the same folder than the index.html file you can leave it as such.
And then, we need to start adding the content to our file.
There are set blocks (divs) of different sizes:
grid_1, grid_2, grid_3, grid_4, grid_5, grid_6, grid_7, grid_8, grid_9, grid_10, grid_11, grid_12
Each number indicates the relative size of the block. Because we are using a 12 Column Grid, we have 12 different sizes to use.
Now, we can add the divs as follows:
<div class="grid_1"></div>
The class, “grid_1″ is defined as 60px wide in the css file.
Those divs are styled as blocks so you can put one next to another and they will float to the left and distribute themselves correctly.
We have to be sure that we add blocks which size adds up to 960px, or 12.
For example this one:
<div class="grid_4"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
(Each “grid_4″ is 300px wide, so 300 times 4 is 12)
Or this one
<div class="grid_4"></div>
<div class="grid_2"></div>
<div class="grid_6"></div>
(4 + 2 + 6 = 12)
Maybe even this one:
<div class="grid_2"></div>
<div class="grid_2"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
(2 + 2 + 4 + 4)
Or finally this one:
<div class="grid_6"></div>
<div class="grid_6"></div>
All of the sizes add up to 12, so that we make sure that the screen is filled.
After every row we add (blocks which size sums 12) we need to add one div more to tell the browser to clear the blocks below.
<div class="clear"></div>
Then our code would be like this:
<div class="grid_6"></div>
<div class="grid_6"></div>
<div class="clear"></div>
<div class="grid_2"></div>
<div class="grid_2"></div>
<div class="grid_4"></div>
<div class="grid_4"></div>
<div class="clear"></div>
In the next part of this series, we will see how we can use grids inside grids and how we can fill in spaces without having to add divs with the specified size. Grids prove to be very useful tools when designing excellent websites.
Examples
I leave you here some websites designed with 960 Grid System… enjoy!
Gantry Framework
Onehub
TabBots
You can find more examples here.
See you next time!
