The 960 Grid System Made Easy
Become a Facebook Fan of Six Revisions.
The first time I discovered the 960 Grid System, I was immediately excited about the possibilities of implementing complex layouts so easily.
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.
We’ll focus specifically on the 960 Grid System, but after reading this guide, you’ll 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, let’s 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.
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. There’s no clear pattern, order, or goal–it’s 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.
It’s interesting to note that random can still be beautiful. Random definitely has its place in nature, art, and even design, but it’s 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 don’t let your imagination get bogged down by the necessary structure.
Why Do I Need a Grid System?
The 960 Grid System–and other tools and systems like it–provide a fast and easy way to create grid-based layouts using CSS. They do this by providing cross-browser-tested and optimized preset column widths for you to set your content into.
Before CSS3, it wasn’t 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, that’s 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 you’re 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 that’s a third of the total width of the page, you have to create a column that’s 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. It’s not exactly rocket science, but it’s 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
The 960 Grid System is simply a way to lay out websites using a grid that is 960 pixels wide.
The reason it’s 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).
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.
CSS Classes Now in Session
When you look at the diagrams above, consider each of the dark blue horizontal bars as a CSS class in the 960 Grid System.
To create an object in your layout that is the width of one of those bars, you simply assign the proper class to your div–that’s it!
The classes are conveniently named according to their size with the grid_1 CSS class being the narrowest and grid_12 CSS class being the widest (grid_16 is the widest in the 16-column version).
So to reuse our image from above, take a look at the available columns now, but this time, think about them using their respective CSS classes instead of pixel widths.
This naming system makes it incredibly easy to hash out complicated layouts in seconds flat. To fill a page’s 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).
To make sure you’re 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 you’ve never worked with the 96 GS before, I hope you’re 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.
Push Me, Pull Me
The 960 Grid System allows you to reposition elements independently by pushing or pulling them horizontally along the page. This is accomplished by using the push and pull CSS classes.
For instance, consider the two examples in the image below. The first example is a basic 4-column layout using only the grid_3 class.
However, in the second version, I’ve pushed the first column and pulled the last column, resulting in their positions jumping over one column from where they would normally lie in the layout.
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 would’ve 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 website’s name is typed out in a logo and placed as the first element on the page.
As the most important element on the page, you’d 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:
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>
This results in the layout shown in the image below.
After pushing/pulling:
Despite the fact that the logo comes first in our markup, it will be visually positioned in the center of our page.
Wide Open Spaces
You’ll often find that you want to create empty space in a layout (negative space is a good design device). To accomplish this, apply the prefix and suffix classes to your divs. These are implemented very similar to the push and pull classes.
For instance, to leave a blank space that is the width of one column before an element, use prefix_1 class, or after an element using suffix_1 class.
As you can see, the example above uses a suffix_3 class to create an empty space the width of three columns after it.
The Beginning and The End
The final bit of knowledge you’ll need to know is that you are provided with the alpha ("first") and omega ("last") classes that must be applied to any grid units that are the children of other grids.
Obviously, the alpha class will be applied to the first child and the omega class to the last child.
Essentially, these classes provide a margin fix so that you can nest grid units inside of other grid units.
Let’s 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:
- Use the
container_12class for the 12-column version and thecontainer_16for the 16-column version. - 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). - Use the
pushandpullclasses to independently position items on the page, regardless of their position in your page’s markup. - Use the
prefixandsuffixclasses to create empty spaces in your layout. - Use the
alphaandomegato 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!
960 Grid System Resources
Now that you’re an expert on grid-basedd web esign and the 960 Grid System, here are a few tools and resources to check out to further your understanding.
Fluid 960 Grid System
An awesome fluid version of 960 GS! Fluid web layouts readjust the layout to fit the page. This can make for some really complicated code, but using this system means that it will do all the heavy lifting for you.
The 1KB CSS Grid
An extremely lightweight grid system that is basic and easy to understand. It’s highly customizable but defaults to 960px.
Variable Grid System
A simple and flexible CSS grid builder based on the 960 Grid System.
Grid-Based Design Gallery
If you’re skeptical about the 960 Grid System and what grid-based design can offer you as a web designer, check out this design gallery. As you can see, with a little imagination and ingenuity, the possibilities are endless.
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.”
Tiny Fluid Grid
This is a grid-builder for a fluid version of the 1KB Grid System above.
Off the Grid
Admittedly, even with all the possibilities and flexibility provided by a grid system like 960 GS, you’re still being placed under restrictive confines. No one is suggesting that all websites should be created on a grid–this would definitely lead to a widespread lack of creativity and lack of variation in page layouts.
Further, as you experiment with 960 GS, you’ll find that there are numerous ways to break the layout that will force you to rethink your designs.
The 960 Grid System–and others like it–merely provide a strong foundation for the numerous times you’ll find yourself building a site that doesn’t break the mold with innovation, but instead needs to convey information clearly and logically in a way that is familiar to a large number of users.
Your Thoughts on Grid Systems?
Leave a comment below and let us know what grid system you prefer and if the information above helped you in your quest to decipher the 960 Grid System. What’s good about grid systems? What’s bad about them? Share your thoughts an opinions below.
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
About the Author
on Amazon.com. Read more 
68 Comments
Nagarjun Palavalli
July 12th, 2010
A brilliant article. Not a lot of grid tutorials cover the basics this well. Thanks for posting this.
Waheed Akhtar
July 12th, 2010
Excellent and very informative. Still it confuses me sometimes :)
John Polling
July 12th, 2010
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 I’ve started to use Compass and SASS – http://theled.co.uk/blog/archive/2010/06/18/semantic-960-gs-using-sass-and-compass/. It gives you the power of the grid systems without the horrible markup.
Rachel
July 12th, 2010
I’ve only ever used the Photoshop versions of 960.gs because I never understood the (seemingly complicated) HTML & CSS versions. This has completely put it into perspective now – definitely going to be using it myself now! :)
Latidocreativo
July 12th, 2010
Hi Joshua, thanks for your post! I’ll try soon!
Niubi
July 12th, 2010
This has to be the first grid tutorial that I’ve actually been able to understand! Thank you so much for posting it. Finally I can now go and examine websites and analyze their own grid styles and layout. DubLi, here I come!
Gabriel himself
July 12th, 2010
Marvelous article…
well done sr!
Philip Brown
July 12th, 2010
Great article. Never really understood the importance of the grid system before reading this. Really well wrote and easy to understand thanks!
Loubna Aggoun
July 12th, 2010
For those using photoshop, there is also an actions file you can download here http://www.johnnynines.com/2010/06/960-grid-actions/
Ogvidius
July 12th, 2010
This is really useful. I’ve been doing web design for a couple of years now and have heard about the 960 grid system, and even looked into it a couple of times and decided to leave it. Now I actually understand why it’s so useful. Would have been great to use on my last project D:
Tookangweb
July 12th, 2010
this post more than describe, thanks for share
Pontus Ekman
July 12th, 2010
Nice article with a great link collection at the end. Thank you!
Cosmin Negoita
July 12th, 2010
Nice article :) I’m a big fan of the 960 GS!
Seth Etter
July 12th, 2010
Great read. CSS frameworks are extremely useful at times. Any abstract design I’ve done usually is better off without, but for 90% of the websites I put together, the 960 grid system has definitely sped things up.
ArleyM
July 12th, 2010
I think the Push and Pull are super valuable. The grid is an amazing tool; but knowing how and when to break the grid is the key to creating visual interest.
Jordan Walker
July 12th, 2010
Using those types of systems sure decreases development time.
Gavin Wisser
July 12th, 2010
I’ve been using the 960 templates for layout but not for coding. I’ve read elsewhere that we should always try keep our code as semantic as possible and that “grid_12″ does nothing to describe the content it contains. I’m pretty new to web design but I’m trying not to learn anything that I’ll have to unlearn in the future. What’s your take on the whole semantic vs. un-semantic argument?
matt bridgeman
July 12th, 2010
Great guide, really useful! I’ve been keen to implement the 960 grid system for a while now and this guide will most definitely help!
dp
July 12th, 2010
What about the vertical aspect of a site? Am I crazy or is all this grid talk only about horizontal space?
(the height of headers, body area, footers, etc and their vertical relationship with each other?)
-dp
Cliff
July 12th, 2010
I usually use the fireworks tool when wireframing or prototyping a website so the layout is much easier to read although I have yet to use the css framework. This article does make it much easier to understand though!
arnold
July 12th, 2010
I never knew push/pull and suffix in 960gs, thanks that’s really informative
Curtis Scott
July 12th, 2010
Great article!
I’ve been a web designer for over 9 years now and stayed away from this system due to what I thought was over complicated/unnecessary code code.
Your article alone broke it down for me (had my “aha” moment)! You’ve inspired me to give it shot again, thanks Joshua.
John Clarke
July 12th, 2010
Great article!
I have been looking around for something like this in order to get it explained to me :) Thanks mate!
Jeff
July 12th, 2010
Thanks a lot for the article. Really helped to grasp the idea of push and pull
Jae Xavier
July 12th, 2010
I forgot about his grid system framework. Gosh I got too many things going on :P
Thanks for remind me Six Revisions!
scott
July 12th, 2010
sam as ive been looking everywere for a good tutorials and exsplanation on how it all works cheers 6R :D
S. Sharp
July 12th, 2010
Absolutely awesome explanation of the 960 GS – you should teach!
mcometa
July 12th, 2010
Great article. 960’s great and easy to use, really. Cris Coyier of CSS-Tricks did a video tutorial about 960, a must watch.
My two cents on 960 and the rest of the CSS frameworks, be sure to have a strong foundation on basic CSS before jumping out to any of the CSS frameworks out there.
putragaluh
July 12th, 2010
great article, i have use it on my blog. its very simple. thanks
udn
July 12th, 2010
wew, great article! thanks :D
aurel kurtula
July 12th, 2010
I am (Almost) in my first stages of being a web designer, a year or so ago i started looking into the 960 grid, unlike you, i hated it as i could not (i did not know how to) adjust the default gaps (so i ended up using my own css in the mix)
so my first thought was, the css provided, is not my work (so i am not learning anything) and i also had to mess the markup to get the columns to meet together, so i found it as if i was doing the same amount of work as if starting from scratch.
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
July 13th, 2010
@Gavin, you can add ID’s to make it more semantic, however, its going to bloat up your code if they are not necessary. HTML5 promotes semantic coding, and right now, there’s a huge debate on what “semantic” actually means.
I’m a huge fan of the 960gs. Its clean, easy to implement, and in my opinion the best framework out there.
Jennifer R
July 13th, 2010
I’ve used the blueprint CSS framework for my project but now starting review about 960 grid :)
aci
July 13th, 2010
very nice!i am study
Farid Hadi
July 13th, 2010
This is a great article that explains how to use the GS. I wish I had come across this when I first started using it. I use the 960 GS PSD templates and find them quite useful.
SJL
July 13th, 2010
Great post, I always love using the 960 grid system!!
Thanks for the interesting read!!
Jayphen
July 13th, 2010
Grid frameworks such as 940 are perfectly fine to use in a development scenario. However, they should NOT ever be used on a live site. The classnames should be translated to semantic classnames, and your stylesheet should be modified accordingly.
Why?
Describing the look (as in how wide an element is) using a classname is mixing presentation with markup. In this case, you may as well be using inline styles and specifying a width on every containing element. It’s the same thing. People KNOW that inline style definitions are bad, so why can’t they translate that concept to understanding that unsemantic classnames are bad?
Remember why inline style definitions are bad – you have to go through your markup if you want to alter the presentation of the website. Using grid systems such as this in production are bringing up those old issues of maintainability. What happens when you want to change the layout? Maybe your main content div will no longer take up 14 columns of real estate because you are introducing a wider sidebar or similar. You will have to go through your markup, remove the classnames, and reapply new ones. How is this different to specifying your widths inline?
I am by no means against grid systems in web design – I believe they are incredibly important. I just think we all need to take a step back and think this over again. CSS frameworks such as SASS go to some length to alleviate the issue, and allow us to use semantic classnames. Let’s keep our presentation separate from content separate from behaviour, and go back to using clean, semantic code.
Tyler McGill
July 13th, 2010
Quick question – you don’t even mention Blueprint CSS, which I thought was the 100 pound gorilla in grid systems. Is there a reason it was left out? Do you know something I don’t? I’ve tried it a couple times and it includes a reset css and other perks. I thought it was pretty good!
Amber Weinberg
July 13th, 2010
Am I the only developer who believes that grids and frameworks produce nasty, ugly, bloated code? If you’re a developer worth anything, your hand-written code should always be of much higher quality. It’s not that hard to produce semantic, valid cross-browser fried ly code and probably takes less time than messing with a system like this and trying to force it to conform to this framework.
Dan
July 13th, 2010
Great article
You’ve really clarified this technique for me
However I would agree with your final point, that we should not all ONLY use these grid system..!
Sometimes we need to break the grid!
James
July 13th, 2010
Excellent read, I’ve just started using the 960gs and I had know idea about suffix/prefix and alpha/omega
thanks :D!
James
July 13th, 2010
Excellent read, I’ve just started using the 960gs and I had no idea about suffix/prefix and alpha/omega
thanks :D!
Nottingham
July 13th, 2010
Great post 960 grids is the way !
Durkin
July 13th, 2010
Just subscribed to your RSS and found this post. It took me a while to understand it, but once I downloaded the source I realised how easy this is to use. Absolutely fantastic way to quickly design websites, thanks very much for the informative post!
chris "cmms" kluis
July 13th, 2010
Question, is 52framework this easy too?
I would prefer to use it because it provides HTML5/CSS3 support for older browsers by including modernizr.
Joshua Johnson
July 13th, 2010
Chris, yep it is. Check out my recent article all about the 52 Framework:
http://designshack.co.uk/articles/css/52-framework-the-first-ever-html5-and-css3-framework
Jessica
July 13th, 2010
Great article and wonderful resources. I love the 960 grid system for designing but haven’t tried using any of the tools for coding. While I doubt I would actually use them on projects as I feel pretty passionate about hand-coding everything myself, I think there is always something to be learned by trying things out, especially when you think you wont like it!
Chris Spain
July 13th, 2010
Wonderful article; really useful (I’d say essential) information on how to make the most of a great resource, presented so concisely. Thanks!
David
July 14th, 2010
Thanks for posting this, it’s a great resource for grid based design and will certainly speed up development for anyone who has not used it before. It’s worth mentioning that the grid 960 comes with PSD (+ other) documents to speed up the graphic design process.
Rehaan
July 14th, 2010
always wanted to know details about his grids.i have to seriously try this system.
Thanks sexy six :)
Rob Bell
July 14th, 2010
Great Grid tutorial – although I’d downloaded the 960 Grid, I haven’t spent much time with it – armed with this tutorial, I’ll be checking it out again. Thank you.
Mag Studio
July 15th, 2010
Try also http://yaml.de/en/ – it’s a great html/css framework.
Jack Rugile
July 16th, 2010
“Aha” moment activated.
Oliver N
July 16th, 2010
Ive seen 960 gs talked about before but not really looked into it. This article has made me think and I might use the system for my personal site. Thanks for this post :)
Zach
July 21st, 2010
For those worried bout semantics:
http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-system/
This link is at the bottom of 960.gs and explains how to minimize the grid css file as well as transform class names and such into more semantically friendly ones.
That being said, I do not use the grid for coding… It may be faster at first, but I am too much of a perfectionist to let it just be ‘good enough’
Sol
July 21st, 2010
Great article!
Simply explained and very informative.
Thanks!
Sebastian Green
July 21st, 2010
Great read. Recently started using the 960 grid system and love it. I didn’t know about the push and pull ability so thanks for pointing that out!
Mark
July 22nd, 2010
Great article. I havent gone much into 960 before, but will try it out now, as you have explained well.
Madisyn
July 22nd, 2010
Thanks for article. Is it easy to place items outside of the grid? For instance, I’ve got a ribbon/tag that i would like to have hanging off the side, but im having trouble placing it accordingly. Any suggestions, or tutorials to point me to?
Murid Rahhal
July 25th, 2010
Hey there, here’s a grid system I created a while back. It’s a PSD file containing different type of grids that you can use when designing a website in Photoshop. Grab a copy here http://blog.sfaranda.com/960-grid-system-free-download , it’s free.
Keith Gorman
July 27th, 2010
Great article Joshua!
I’ve been using the 960 Grid System for a while now, but this is the first article I’ve seen that explains it perfectly! Such a simple and effective framework to use. Thanks for taking the time to explain it so concisely.
Keith
Noobie
July 30th, 2010
Thank you for this well written, clear article. Your approach lended to the ease of understanding this topic. I’m just getting started and I “get” it already. :-)
Jeremy Griffin
August 6th, 2010
Great succinct article. Has put a light on the push/pull and suffix/prefix positioning and nestings……I was also building my own code to cover for some of this in-built functionality.
Also has sparked a v. interesting debate re. grids vs. clean semantic code.
Thanks.
Chris
August 9th, 2010
Thanks Josh – appreciate the link to this article.
If you have time do you have any thoughts on which grid system is ‘best’? I know that’s a leading question but I can’t see why you’d use one over the other. My mind is telling me it’s just a matter of personal choice and nothing more. Would you agree?
Gemma
August 17th, 2010
Thanks for this article. I’ve used the grid for layout purposes but not for coding purposes. It’s been established that the CSS framework for this grid system is too bloated and unsemantic so my suggestion is to forget the SASS stuff and just build your own framework for this grid. There’s no need to rely on other stuff like SASS. And you’ll learn more about what you’re doing by building your own framework.
Jayphen
August 17th, 2010
@Gemma – The idea of SASS is that it makes it far easier to do just that. Because SASS allows you to create 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
August 22nd, 2010
Great article, sums up using a grid system real nicely. However, you should correct the CSS-class names, as the underscore is not a legal character.
Kars
September 1st, 2010
Thx for xplaining this to me! Plus some great grid resources in this article aswell
Leave a Comment