Professional Documents
Culture Documents
The 960 Grid System Made Easy
The 960 Grid System Made Easy
1 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Six Revisions
Skip site navigation
Home
All Articles
Tutorials
Freebies
About
Contact
Subscribe: RSS Feed
Follow on Twitter
Tweet
906
Like
242
The 960
advertise here
The first time I discovered the 960 Grid System, I was immediately excited about the possibilities of
implementing complex layouts so easily.
17-02-2013 22:13
2 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
However, since I was fairly new to web design at the time, when I downloaded the files, I quickly became
overwhelmed at how complicated the whole thing seemed.
With all this code, how could this be the easy way to create a layout?
This article is for web designers and front-end web developers who are interested in grid-based layout systems
but are at a loss on how to decipher them.
Well focus specifically on the 960 Grid System, but after reading this guide, youll find that most of the other
grid systems out there are similar and will make much more sense after you understand a few basic principles.
Grid-Based Design
Before we get into the specifics of the 960 Grid System, lets briefly discuss grid-based design in general. The
idea is certainly not something that originated on the Web. In fact, it stems from one of the oldest and most
basic design principles: alignment.
Our brains like to simplify things to make them readily understandable. This is why we try to impose order on
things that seem chaotic, like seeing a face in the craters on the moon.
Naturally, the easier it is to impose order, the quicker our brains can identify a pattern and move on. Grids are
so organized and orderly that they require almost no interpretation our part.
Consider the two page layouts represented in the image below.
17-02-2013 22:13
3 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Though both of these images are simply a gathering of rectangles, the layout at the top seems fundamentally
better than the one on the bottom. We can instantly recognize a pattern, accept it, and move on.
The image on the bottom, however, is visually unsettling by comparison. Theres no clear pattern, order, or
goalits just looks like a random assortment of shapes.
Our eyes have a tendency to frantically search for fractions of a second while we attempt to identify a trend,
which increases the time necessary to take in the scene as a whole.
Its interesting to note that random can still be beautiful. Random definitely has its place in nature, art, and
even design, but its no way to logically organize information.
The point is that grids are among the simplest and strongest ways to create order on a page. They may seem
cold and rigid, but remember that they are both extremely efficient and effective, and can even be quite
flexible if you dont let your imagination get bogged down by the necessary structure.
17-02-2013 22:13
4 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Before CSS3, it wasnt exactly easy to break up a page into columns without getting into tedious math.
For instance, if you have a 1,000-pixel wide container and you want to split it up into three columns, thats
333 and 1/3 pixel per column (not exactly a nice whole number). Further, columns broken up like this would
crash into each other, so a margin must be added on each side. If we add a 10-pixel margin to each side of
every column, we must also subtract that 20 pixels from the width of each column. This gives us 3 columns
roughly 313 pixels wide each with a margin of 10 pixels on each side (even then youre at 999px and not
1,000px).
Want 4 columns in a row below that? Then you have to start the process over and subtract 80px of margin
from 1,000px for a total of 920px and divide that by 4 to get a column width of 230px.
Finally, if you want to add a sidebar thats a third of the total width of the page, you have to create a column
thats 750px for the content and one that is 250px for the sidebar, then subtract 40px of margin to get one
730px column and one 230px column.
Confused yet?
Other web designers were too. Its not exactly rocket science, but its also not something you want to go
through again and again for each project that you create.
The solution? Find someone else to figure out all these crazy column widths, throw them into a CSS
document, and let you download it free. (That person happens to be Nathan Smith, creator of the 960 Grid
System).
The 960 Grid System is simply a way to lay out websites using a grid that is 960 pixels wide.
The reason its 960 pixels wide is because the number 960 makes for a lot of clean divisions utilizing whole
numbers when factoring in column widths and margins. And it fits nicely on the majority of screens.
The 960 GS comes in two primary variants: a 12-column grid and a 16-column grid (a 24-column version is
included as well for those that really need extra control).
17-02-2013 22:13
5 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
In the 12-column version, the narrowest column is 60 pixels wide. Each column after that increases by 80
pixels.
So the available column widths are: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and 940.
Similarly, in the 16-column version, the narrowest column is 40 pixels wide and each column after that
increases by 60 pixels.
So the available column widths are: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880
and 940.
17-02-2013 22:13
6 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
This naming system makes it incredibly easy to hash out complicated layouts in seconds flat. To fill a pages
width, the trick to keep in mind is that the numbers assigned to your selected classes must equal 12 in the
12-column version and 16 in the 16-column version.
For instance, using the 12-column version, if you have 3 divs of text that you want to be displayed
side-by-side in a 3-column layout, simply assign the grid_4 class to each one to total 12 (4+4+4=12).
Similarly, assigning the grid_4 CSS class in the 16-column version makes it easy to create a 4-column layout
(4+4+4+4=16).
17-02-2013 22:13
7 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
To make sure youre referring to the proper classes, be sure to place your 12-column elements inside a div
with the class container_12 and your 16-column classes inside a div with the class called container_16.
If youve never worked with the 96 GS before, I hope youre having your "aha" moment right now regarding
just how easy it is to spec out a layout in no time at all using this system.
Keep in mind that you can push items as far as you want. If I had wanted to push an element two columns
over, I wouldve implemented the class push_2, and so on.
The push/pull system has major implications for how you lay out a page in your HTML document.
For instance, in the example below, imagine the websites name is typed out in a logo and placed as the first
element on the page.
As the most important element on the page, youd like to keep the logo as the first item in your HTML
markup, but visually, you actually want it to appear in the center of the page.
Before pushing/pulling:
17-02-2013 22:13
8 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
To visually position the logo element in between the two text columns, you would use the following HTML:
<div class="grid_6 push_3">
<p>logo</p>
</div>
<div class="grid_3 pull_6">
<p>text column</p>
</div>
<div class="grid_3">
<p>text column</p>
</div>
<div class="grid_12">
<p>big box</p>
</div>
Despite the fact that the logo comes first in our markup, it will be visually positioned in the center of our
page.
17-02-2013 22:13
9 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
As you can see, the example above uses a suffix_3 class to create an empty space the width of three
columns after it.
Lets Review
Armed with this newfound knowledge, you should now be a 960 Grid System expert.
To review, there are basically only 5 concepts you need to remember:
1. Use the container_12 class for the 12-column version and the container_16 for the 16-column
version.
2. Use the classes grid_1, grid_2, grid_3, etc. to set your column widths. If you want to fill a page
horizontally, make sure the numbers add up to 12 or 16 (i.e. grid_4 + grid_2 + grid_6 = 12).
3. Use the push and pull classes to independently position items on the page, regardless of their position
in your pages markup.
4. Use the prefix and suffix classes to create empty spaces in your layout.
5. Use the alpha and omega to fix the margins for any nested grid units.
There is also a CSS reset included with the 960 Grid System. This is a completely optional file based on the
ever popular Eric Meyer CSS reset. If you like it, keep it. If not, trash it!
17-02-2013 22:13
10 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
17-02-2013 22:13
11 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Typogridphy
From the site: "Typogridphy is a CSS framework constructed to allow web designers and front-end developers
to quickly code typograhically pleasing grid layouts.
17-02-2013 22:13
12 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
17-02-2013 22:13
13 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Related Content
A Brief Look at Grid-Based Layouts in Web Design
The Evolution of Web Design
The Brads Alignment in Design
Related categories: Web Design and Web Development
Joshua Johnson is a Graphic Designer/Web Designer with over six years of experience working
with a major international marketing agency. He is also the Editor of Design Shack, a web design and
development blog. Check out his recent work and follow him on Twitter: @secondfret.
142 Comments
Nagarjun Palavalli
Waheed Akhtar
John Polling
17-02-2013 22:13
14 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Grid systems are very handy and should be used by everyone, however my overriding concern is how horrible
they make your markup. It seems that everyone is reverting back to putting layout information in their
markup and grid systems also produce bad cases of divitis and classitis. To get around this problem Ive
started to use Compass and SASS http://theled.co.uk/blog/archive/2010/06/18/semantic-960-gs-usingsass-and-compass/. It gives you the power of the grid systems without the horrible markup.
Rachel
Latidocreativo
Niubi
Gabriel himself
17-02-2013 22:13
15 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Philip Brown
Loubna Aggoun
Ogvidius
Tookangweb
Pontus Ekman
17-02-2013 22:13
16 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Cosmin Negoita
Seth Etter
ArleyM
Jordan Walker
Gavin Wisser
17-02-2013 22:13
17 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
matt bridgeman
dp
Cliff
arnold
Curtis Scott
17-02-2013 22:13
18 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
John Clarke
Jeff
Jae Xavier
scott
S. Sharp
17-02-2013 22:13
19 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
mcometa
putragaluh
udn
aurel kurtula
17-02-2013 22:13
20 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
so i think i am going to try and use the grid again, and hopefully become to like it (as when the pros like it,
then i MUST like it, right!)
my comment maybe long winded (or pointless), but the bottom line is:
a great article, and thanks a lot for sharing it with us
Adam Hermsdorfer
Jennifer R
aci
Farid Hadi
17-02-2013 22:13
21 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
SJL
Jayphen
Tyler McGill
17-02-2013 22:13
22 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Amber Weinberg
Dan
James
James
Nottingham
17-02-2013 22:13
23 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Durkin
Joshua Johnson
Jessica
17-02-2013 22:13
24 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Chris Spain
David
Rehaan
Rob Bell
Mag Studio
17-02-2013 22:13
25 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Jack Rugile
Oliver N
Zach
Sol
Sebastian Green
17-02-2013 22:13
26 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Mark
Madisyn
Murid Rahhal
Keith Gorman
Noobie
17-02-2013 22:13
27 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Jeremy Griffin
Chris
Gemma
Jayphen
17-02-2013 22:13
28 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
variables and mixins, you can define all of your column widths and gutters at the top of your CSS document
& then just include those values later on in the document. SASS is not a framework, rather it is an extension
of the language.
Nikke
Kars
Claudia
Roxcar
Lindsay
17-02-2013 22:13
29 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
When I first read this I was like AH HA!! why havent I been using this all along?! Then I realized that this
code doesnt REALLY do anything for me because I have been able to create my own cross browser
compatible websites that LOOK like they were grid based but are soo much cleaner.
I guess the moral of the story is, if you can create your own, do it because it will be easier to understand and
more semantic I have never been a huge fan of developers using class on top of class to get things to look
the way they want, why not set an id or class and make it cascading?
Ben
Ricky
Darrell
the bone
17-02-2013 22:13
30 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
nadeem
Essiew
binam
robert
Dietmar
17-02-2013 22:13
31 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Okay, its a bit late, but finally I recognized that I cannot leave the 960gs unattended for time sake. Thanx for
this breif introduction!
Goldie
Paul Winslow
Danny
Ben
Rudi Roux
17-02-2013 22:13
32 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
carlos
gabriela
Francis
Francis
17-02-2013 22:13
33 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Arne
Michael
tomb
Dan
34 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
David Francoeur
Dana
Michael
Pieter
Nadya Quintanilla
17-02-2013 22:13
35 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
shahin
Lewis
17-02-2013 22:13
36 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
countModules(top-a)) : ?>
<div id="topmod-a" class="grid_ >
countModules(top-b)) : ?>
<div id="topmod-b" class="grid_ >
countModules(top-c)) : ?>
<div id="topmod-c" class="grid_ >
countModules(top-d)) : ?>
<div id="topmod-d" class="grid_>
How do I get them to colapse only to the right and not include the grid size for the Positions on the left?
thx and loved the tutorial.
Jeraldo
John
Roshni
Namal
17-02-2013 22:13
37 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Hakim Sabri
hellsing357
Nilamkumar Patel
Scott
Christopher
17-02-2013 22:13
38 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
ianemv
yan.wang
veer
Kishore Mylavarapu
codecowboy
17-02-2013 22:13
39 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
JLT
Mike Girard
Mike Girard
17-02-2013 22:13
40 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Matthew
Jam
MJ
17-02-2013 22:13
41 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Gavin H
Jared H.
Mohammad
Ragz
Curtis
17-02-2013 22:13
42 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
- Is 960.gs still the valid in light of SASS which I am now just looking into?
Thanks!
Craig
Puneet Sahalot
cedric chaux
faisal
17-02-2013 22:13
43 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Rajitha
Ariel leroux
ashraf
Emily
Usman
17-02-2013 22:13
44 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Rubel
Joe
Peter Rodrick
Vonn
vinod
17-02-2013 22:13
45 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
this gives in brief explanation for the starters to fix there designs with 960px if im going with 1003px then grid
framework need to fix to the base of it the design should be made in same sizes when planning for 960px grid
if the design is complex this can create lots of complex,
I better stick to my own size design that base on requirements as i receive instructions when i propose a
design to client some time the width of the columns to be reduce rather then the size 960 grid specifies.
thanks for the prototype in brief to understand css grid frameworks, Boilerplate and css3 grid may help us.
susant
Leave a Comment
Name (required)
email (will not be published) used for Gravatars (required)
Website
17-02-2013 22:13
46 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Advertise Here
Advertise Here
Search
Topics
AJAX
CSS
Design Showcase / Inspiration
Flash
Freebies
Graphic Design
JavaScript
Mobile
Photoshop
Project Management
Resources
Tools
Tutorials
Usability / Accessibility
User Interface
Web Applications
17-02-2013 22:13
47 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Web Design
Web Development
Web Standards
WordPress
Recent
Lessons We Learned from Our Biggest UX and Design Mistakes
A Comparison of Methods for Building Mobile-Optimized Websites
The Winners of Dot Grid Books from Dotgrid.co
Free Download: WinX iPhone iPad Video Software Pack (Worth $89.85)
Giveaway: Dot Grid Books for Designers from Dotgrid.co
Partners
Friends
1stwebdesigner
Addictive Fonts
AddToDesign
App Sheriff
Blog.SpoonGraphics
BrushLovers
Burbia
Chris Wallace
CoolHomepages
CSS Globe
Design Bump
DesignOra
DesignM.ag
Desizn Tech
fudgegraphics
Function
GraphicsFuel
iBrandStudio
InstantShift
LaptopLogic.com
Marcofolio.net
MyInkBlog
Naldz Graphics
NETTUTS
N.Design Studio
Noupe
Onextrapixel
ProductiveDreams
17-02-2013 22:13
48 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
psdfan.com
PSDVIBE
Queness
[Re]Encoded.com
Smashing Apps
Smashing Magazine
Stylegala
Speckyboy Design Magazine
Stylized Web
Technology.am
TheBestDesigns.com
Vandelay Design
Walyou
Web Designer Help
Webdesigner Depot
Web Design Ledger
Wordpress Themes Shock
WPBeginner
Become a Facebook Fan of Six Revisions. Advertise - Contact - RSS Feed 2008-2013 Six Revisions. Six
Revisions mobile version by Mobify.
17-02-2013 22:13