How to use Grids in Your Design and Why – Part I
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!
[...] This post was mentioned on Twitter by Nicole Dominguez, Saad Bassi. Saad Bassi said: RT @sodevious How to use Grids in Your Design http://bit.ly/aJxQ9m [...]
Great post; thanks for sharing
I might add the grid to my site. Contemplating it.
I’m glad you like it…
I 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!
That’s great!
This 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!
Hope you make more tuts soon.
Wow, great post! Will bookmark this to possibly implement it in a future site!!!
I will…
Actionly, there’s a second part.
[...] How to use Grids in Your Design and Why – Part I [...]
[...] Questo post è stato scritto da Juan Sebastián Celis Maya, di Evolucionemos. com e Sebascelis. com. Vi siete mai chiesti come mai alcuni siti sembra così ben organizzata e stile? Forse l'informazione è molto ben distribuiti … ma ciò che rende speciali questi siti? Beh, in realtà vi è un segreto! La maggior parte di loro usa qualcosa chiamato "griglie". Così che cosa è una griglia? In web design, [. . . ] URL articolo originale http://sodevious.net/2010/04/how-to-use-grids-in-your-design-and-why/ [...]
great tutorial. thank you.
RT @MMTVcom How and why to use Grids in Your #webDesign http://bit.ly/aJxQ9m #html #grid #tutorial #Tutorials RT @sodevious
RT @eLearningGuild RT @MMTVcom: How and why to use Grids in Your #webDesign http://bit.ly/aJxQ9m #html #grid #tutorial #Tutorials RT @…
RT @templatestream RT @MMTVcom How and why to use Grids in Your #webDesign http://bit.ly/aJxQ9m #html #grid #tutorial #Tutorials RT @s…
RT @templatestream RT @webEchoLess How and why to use Grids in Your #webDesign http://bit.ly/aJxQ9m #html #grid #tutorial #Tutorials R…
RT @sodevious How to use Grids in Your Design and Why: http://bit.ly/aJxQ9m
RT @templatestream RT @templatestream RT @webEchoLess How and why to use Grids in Your #webDesign http://bit.ly/aJxQ9m #html #grid #tu…
RT @templatestream RT @templatestream RT @MMTVcom How and why to use Grids in Your #webDesign http://bit.ly/aJxQ9m #html #grid #tutori…
RT @mmatthewlyle: RT @sodevious How to use Grids in Your Design and Why: http://bit.ly/aJxQ9m
RT @templatestream RT @eLearningGuild RT @MMTVcom: How and why to use Grids in Your #webDesign http://bit.ly/aJxQ9m #html #grid #tutor…
How to use Grids and Why.
http://bit.ly/95Uy1B
[...] Este post fue escrito por Juan Sebastián Celis Maya, de Evolucionemos. com y Sebascelis. com. ¿Te has preguntado por qué algunos sitios web se ve tan bien organizados y con un estilo? Tal vez la información se distribuye muy bien … pero lo que hace que los sitios web especiales? Bueno, en realidad no es un secreto! La mayoría de ellos usan algo llamado "redes". ¿Cuál es tan una red? En Diseño Web, [. . . ] URL del artículo original http://sodevious.net/2010/04/how-to-use-grids-in-your-design-and-why/ [...]
[...] How to use Grids in Your Design and Why – Part I [...]
[...] we saw in the first part of this series, all we need is to make sure that the screen is filled in each row. And in our [...]
Wow, I just learned something… http://sodevious.net/2010/04/how-to-use-grids-in-your-design-and-why/
How to use Grids in Your Design and Why – Part I…
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?…
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.
RT @MiaWithLove: Wow, I just learned something… http://sodevious.net/2010/04/how-to-use-grids-in-your-design-and-why/
RT @MiaWithLove: Wow, I just learned something… http://sodevious.net/2010/04/how-to-use-grids-in-your-design-and-why/
RT @sodevious: How to use Grids in Your Design and Why – Part I #beginners #grid #guest post #tutorial #Web http://bit.ly/aJxQ9m
Delicious: How to use Grids in Your Design and Why – Part I: http://bit.ly/cnwyTJ [design, method]
[...] we saw in the first part of this series, all we need is to make sure that the screen is filled in each row. And in our [...]
These days, the grid systems are one of the must in web design practice. It’s so much easier when using grids. Everyone should use a grid system.
Thanks for the explanations.
Thanks a bunch. really helpful.