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" "w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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!
Great post; thanks for sharing :) I might add the grid to my site. Contemplating it.
ResponderEliminarI'm glad you like it...
ResponderEliminarI strongly recommend using the grid.
Just wait for this post's second part ;)
Great post! I needed this, I'm currently trying to redo my site, and this is exactly what I was trying to accomplish, thanks for posting!
ResponderEliminarThat's great!
ResponderEliminarThis is a very helpful system, I'm glad you like it.
OMG, thanks for this tut, I've been looking everywhere for a tut like this!
ResponderEliminarHope you make more tuts soon. :D
Wow, great post! Will bookmark this to possibly implement it in a future site!!!
ResponderEliminarI will...
ResponderEliminarActionly, there's a second part. :)
great tutorial. thank you.
ResponderEliminarRT @MMTVcom How and why to use Grids in Your #webDesign bit.ly/aJxQ9m #html #grid #tutorial #Tutorials RT @sodevious
ResponderEliminarRT @templatestream RT @MMTVcom How and why to use Grids in Your #webDesign bit.ly/aJxQ9m #html #grid #tutorial #Tutorials RT @s...
ResponderEliminarRT @eLearningGuild RT @MMTVcom: How and why to use Grids in Your #webDesign bit.ly/aJxQ9m #html #grid #tutorial #Tutorials RT @...
ResponderEliminarRT @templatestream RT @webEchoLess How and why to use Grids in Your #webDesign bit.ly/aJxQ9m #html #grid #tutorial #Tutorials R...
ResponderEliminarRT @sodevious How to use Grids in Your Design and Why: bit.ly/aJxQ9m
ResponderEliminarRT @templatestream RT @templatestream RT @webEchoLess How and why to use Grids in Your #webDesign bit.ly/aJxQ9m #html #grid #tu...
ResponderEliminarRT @templatestream RT @templatestream RT @MMTVcom How and why to use Grids in Your #webDesign bit.ly/aJxQ9m #html #grid #tutori...
ResponderEliminarRT @mmatthewlyle: RT @sodevious How to use Grids in Your Design and Why: bit.ly/aJxQ9m
ResponderEliminarRT @templatestream RT @eLearningGuild RT @MMTVcom: How and why to use Grids in Your #webDesign bit.ly/aJxQ9m #html #grid #tutor...
ResponderEliminarHow to use Grids and Why.
ResponderEliminarbit.ly/95Uy1B
Wow, I just learned something... sodevious.net/2010/04/how-to-use-grids-in-your-design-and-why/
ResponderEliminarHow to use Grids in Your Design and Why – Part I...
ResponderEliminarHave 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?...
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.
ResponderEliminarRT @MiaWithLove: Wow, I just learned something... sodevious.net/2010/04/how-to-use-grids-in-your-design-and-why/
ResponderEliminarRT @MiaWithLove: Wow, I just learned something... sodevious.net/2010/04/how-to-use-grids-in-your-design-and-why/
ResponderEliminarRT @sodevious: How to use Grids in Your Design and Why - Part I #beginners #grid #guest post #tutorial #Web bit.ly/aJxQ9m
ResponderEliminarDelicious: How to use Grids in Your Design and Why – Part I: bit.ly/cnwyTJ [design, method]
ResponderEliminar