The 960 Grid System Made Easy

Jul 12 2010 by Joshua Johnson | 147 Comments

The 960 Grid System Made Easy

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.

screenshot

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

screenshot

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.

screenshot

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.

screenshot

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.

screenshot

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).

screenshot

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).

screenshot

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.

screenshot

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:

screenshot

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:

screenshot

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.

screenshot

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:

  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 page’s 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!

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.

screenshot

The 1KB CSS Grid

An extremely lightweight grid system that is basic and easy to understand. It’s highly customizable but defaults to 960px.

screenshot

Variable Grid System

A simple and flexible CSS grid builder based on the 960 Grid System.

screenshot

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.

screenshot

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.”

screenshot

Tiny Fluid Grid

This is a grid-builder for a fluid version of the 1KB Grid System above.

screenshot

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

About the Author

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.

147 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.

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

Claudia

September 7th, 2010

Thanks so much for taking the time to put this together. I’ve had this article up on my laptop for days. The illustrations have been so helpful in understanding how to code my CSS in grid fashion. I’ve bookmarked this for future reference because I know I’ll be back. :)

Roxcar

September 13th, 2010

Oi! Thanks for this! Bookmarked and printed out!

Lindsay

September 20th, 2010

When I first read this I was like “AH HA!! why haven’t I been using this all along?!” Then I realized that this code doesn’t 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

September 20th, 2010

Incredibly helpful article with excellent examples. Thank you much for your work, this will undoubtedly speed up my design process.

Ricky

October 3rd, 2010

There’s a new one. http://thesquaregrid.com Pretty cool

Darrell

October 5th, 2010

Is it overkill to apply HTML5 to 960gs design? I may have a grid_# for a rotating featured news box and inside that div put . Then I may also have a list of other recent news on my homepage that is in a grid_# then put inside there a section. grid_# div > section > article. I seem to be making a mess as I try to determine where to put things. Wont that help Google or browsers in the future to understand the semantics even though im using 960gs divs?

the bone

October 5th, 2010

Superb work geezer, and very helpful. :)

nadeem

October 12th, 2010

nice article. Help me understand the nesting of grids quickly.

Essiew

October 27th, 2010

Thank you for a clear article. I’ve started experimenting with it and found there is one problem that hasn’t been mentioned. Grid 960 does not give you equal height columns. If the columns all share the same background, they will appear to be equal heights and OK. But, if you want different backgrounds, save yourself a lot of hassle and heartache and make use of a jQuery plugin: http://www.cssnewbie.com/equal-height-columns-with-jquery/

binam

November 4th, 2010

Excellent definition about 960
Thanx a lot!!!!!

robert

November 15th, 2010

Please help!!! I can’t figure out how to have a div stretch from edge to edge. I have a background image that currently stops at the left and right gutters. What do I need to do? I am very new to using the 960 grid system. Thank you in advance.

Dietmar

November 19th, 2010

Okay, it’s a bit late, but finally I recognized that I cannot leave the 960gs unattended for time sake. Thanx for this breif introduction!

Goldie

December 29th, 2010

Thank you, this clears up a whole lot. Please help me with a basic question. I used a basic html page in dreamweaver and put this in. But I can’t get the grids to show up on a background div. I’ve tried giving a color to container_12, or even wrapped that in a div, but nothing shows. What am I missing?

Paul Winslow

January 2nd, 2011

Thanks very much.

Danny

January 4th, 2011

Thanks for clearing this up!

Ben

January 5th, 2011

Am I alone in thinking this is just a fancy way of not using tables?

hmm how can I make a 12-column grid in html….

etc you get the point

Rudi Roux

January 13th, 2011

Great article. This gives wordpress layout module functions like joomla i assume. This is great, the one weakness of wordpress addressed!

carlos

January 14th, 2011

I started to use 960gs today.
One thing that has me puzzled.
I have 2 columns
The left column needs to touch from the header to the footer.
The right column has various content.
I can’t figure out how to make the left menu. I mean I can set my grids but it is always as high as the other containers to its right
I tried placing left and right columns in a container, but failed
THanks

gabriela

January 17th, 2011

Really informative, I’m going to try it right away!

Thanks

Francis

January 24th, 2011

Finally, an article that resolves my confusion about 960 grid system. I always thought why the heck use it when it’s confusing in the first place.

Joshua Johnson …. you’re the man!!!! And thank you for sharing this sweet golden knowledge.

Francis

January 24th, 2011

For those of you asking how to create it fast it HTML? … well here it is:

http://960ls.atomidata.com/#

Arne

January 26th, 2011

Finally! Great to have this information. Thanks so much!

Michael

January 31st, 2011

This makes a whole lot more sense now! Thanks so much!

Dumbrava Razvan Aurel

February 9th, 2011

Very helpful for me! Thanks!

tomb

February 21st, 2011

thanks for tutorial .

Dan

February 24th, 2011

After downloading the 960 grid and experimenting with it, I realized that I was missing some knowledge. This quickly answered all of the questions that I had. Thanks!

David Francoeur

March 9th, 2011

Amazing article dude, it kinda cleared thigns up for me!

Dana

March 13th, 2011

thanks for the explanation. very useful!

Michael

March 14th, 2011

I understand the horizontal aspects of the Grid system.

I don’t understand how to control the vertical spacing between the horizontal rows. For me, that part is missing.

Pieter

March 16th, 2011

I have a problem with height in Chrome browser. In Firefox, IE is all ok, but in Chrome is problem with height. Please visited the web and show my source code and please take me advice. Thak you

Nadya Quintanilla

March 23rd, 2011

love the explanation, i got the answers to my questions!
thanks!

shahin

March 24th, 2011

it is not so bad…………

Lewis

March 24th, 2011

hi, Im having some issues with fixing the position of my header while using this grid system.
So I have the header, content then footer, I want to fix the header so its always in view as this is where the navidation menu will be and theres only one page.
When I set the position of the container it causes the content to slip under the header, so in effect the header lays over top part of the content which shifts up behind it. Does anyone have any idea how to solve this? I would be really happy if you could help me as this is my dissertation which is F^%$ed up at the moment. Thanks!! :-) [Email removed for privacy]

Renier Janse van Rensburg

April 8th, 2011

Ok very nice and complete tut….but Im lost and need help.

I have 4 top positions and have made the colapse but they go all wrong here is my if statementin my head:

?php
if ($this->countModules(‘top-a’) == 0):?>

countModules(‘top-b’) == 0):?>

countModules(‘top-c’) == 0):?>

countModules(‘top-d’) == 0):?>

and in my body:

getCfg(‘sitename’);?>

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

April 16th, 2011

Wow. Thanks! Very nice explanation. :D

John

April 20th, 2011

I got the very nice tutorial about development wordpress theme with 978 grid system. Check following URL
http://wordpressapi.com/2011/04/17/how-to-develop-wordpress-theme-with-978-grid-system/

Roshni

April 22nd, 2011

Its really very intresting and thanks a lot for sharing..

Namal

April 23rd, 2011

A brilliant post. I have got full idea of this as I think

Hakim Sabri

May 12th, 2011

That’s amazing! Can’t believe I just heard about this. Thanks very much for the article..

hellsing357

May 23rd, 2011

Great Article
wow

so that’s what 960 gs
is

“Eureka”

Nilamkumar Patel

May 30th, 2011

This article is very useful and will help me lot while designing a layout using 960 grid. Thanks for your article

Scott

May 31st, 2011

I really wish you would have given examples of using alpha and omega. I believe that would be how to display tabular data in the body of a document in place of using a table.

Christopher

June 8th, 2011

I thought this was a well presented post. No doubt, grids should always be a starting point for design — print or pixel — and even for those funky ‘outside the box’ designs. How you arrive at the final product in production is another matter. Thanks very much.

ianemv

June 17th, 2011

Although I started to played around with 960.gs just this year, I wasn’t able to have an actual application of it. Earlier, I played around with the WP template I made last January Basic mean and convert its layers to 960.gs. I did it so fast. Such a shame I didn’t used it for years.

yan.wang

June 24th, 2011

That is very good!Thanks!

veer

July 6th, 2011

Nice one thanks a buch !! :)

Kishore Mylavarapu

July 9th, 2011

Grid system is the best way to start web designing.

codecowboy

July 13th, 2011

What is the recommended way to insert vertical space above a child div? I’ve just been adding a top margin to things if I want to create space above an element.

JLT

July 21st, 2011

Thank you for this excellent tutorial. I am not yet able to use the grid-system but at least I have an idea of what it is and how it works.

Jimmy Powdrell Campbell

July 24th, 2011

960 looks clunky, complex and seriously unattractive at first sight but you’ve managed to show that its beauty’s in its simplicity :)

I’ve been avoiding 960 grid for ages – lol – and finally got too curious to stay away any longer! Somehow I expected hours of study but this article nailed the lot in an easy two-minute read.

Very well written :)

Mike Girard

July 24th, 2011

This is a really excellent tutorial. I just started using 960gs and was not aware of anything except the grid and container classes. The stuff on prefix, suffix, push, pull is great.

One thing, though: Let’s say you want to create a menu bar that spans the whole container and where each item is, say, two columns wide. Are there classes for dispensing with the margins on a column? I realize I could kluge something together on my own but was wondering if a standard bullet-proof solution was available out of the box. If so, might be handy to add it to this extremely clear, well-written and useful tutorial.

Mike Girard

July 24th, 2011

I really wish you would have given examples of using alpha and omega. I believe that would be how to display tabular data in the body of a document in place of using a table.

If you want a semantic page, you should be using a table for tabular data.

Still, I am a little confused by the alpha and omega classes myself and would appreciate an example.

Matthew

July 27th, 2011

One thing that still throws me for a loop sometimes is nesting grids. I can’t seem to get it straight what to class which elements in the hierarchy, and end up having things creep outside the grid. It would be great if you could go into how to class your nested elements in 960 grid, say to four levels deep. Otherwise, great article :)

Jam

August 10th, 2011

Fudge, man. I had this working fine a few months ago. Got back into using it again and for some reason I have two 6s side by side but I can’t put two more 6s side by side below them. This is so frustrating!

MJ

August 14th, 2011

Best guide I could find online to make sense of the 960 fluid grid system. Has me making full webpages with this system from scratch.

I have been checking the webpage as I go along in Dreamweaver’s multiscreeen viewport option and it has worked out very well with items stacking nicely. But then it was time to put my webpage live and when I checked that page on my Iphone it did not stack! Instead I saw a miniature version of my full webpage and no stacking.

Any comments or suggestions would be appreciated.

Gavin H

August 16th, 2011

Great Stuff. This excellent tutorial has made me see the light!!!

Jared H.

August 18th, 2011

Thanks for the brilliant posting. I am new to 960.gs (1-day-old) and I found this post really inspired me. Thanks a lot!

Mohammad

September 1st, 2011

Really Thanks

Ragz

September 2nd, 2011

Great Article! 960 grid has always sounded very complex but it has been described beautifully by you to make it sound as the easiest thing. The only topic which i feel you rushed out was ‘alpha’ ‘omega’.. which i could not understand at all :(

Curtis

September 9th, 2011

Great article Joshua!

I would like to see a follow up since this article is now getting long in the tooth on these topics regarding 960.gs

- Additional tricks and pitfalls like having equal column and other nuances..
- A discussion of whether you should continue to use 960 in light of HTML5 CSS3?
- Is 960.gs still the valid in light of SASS which I am now just looking into?

Thanks!

Craig

September 19th, 2011

What a breath of fresh air, Congratulations on a tutorial that actually works.

Puneet Sahalot

September 21st, 2011

Landed on this article from some other article I was reading. I found this a “perfect” article about 960GS.
Though I used 960GS twice, I wasn’t able to make most of out it. But, I am pretty sure now that I can handle it well :)

Thanks for sharing the knowledge!

cedric chaux

September 29th, 2011

Nice article on the concepts linked to 960 template.
Maybe a little more emphasis on the cool aspect and the impact on mobile web development could have been grea ;)

Thanks a lot

faisal

September 30th, 2011

thank you .. great efforts

Rajitha

October 3rd, 2011

this is superb. i really needed a 960GS 101 for a quite some time now. thanks Joshua (from Ceylon)

Ariel leroux

October 5th, 2011

This is the best dang article that I’ve found on the 960 grid. It may be great that he’s put together that page, but as a quick reference… I’m finding the pickings to be rather low in quality.

Your article actually gave me a better grasp of the logic behind the push and pull, the grids, the naming for the grids, etc.

Thank you.

ashraf

October 11th, 2011

very good explanation

Emily

October 12th, 2011

Thank you so much for this article! Being new to design, I’ve come across a lot of new things that have made me scratch my head and think, “Huh?”, the 960GS being one of them. But this article has cleared up all confusion quite quickly.

Usman

October 20th, 2011

Thnx….And how to remove the margin between these gridz?????…..

Rubel

October 22nd, 2011

I thought you would explain the alpha and omega classes in detail. In spite you have written a great article and I’ll come to learn again and again. Thanks a lot.

Joe

November 16th, 2011

This is without a doubt, the most clear and concise description on the tactical side of the 960… well any grid system… that I’ve ever read. THANK YOU!

This is a exceptional practical treatment on the subject that I will recommend whole heartedly. Once again, Thank you!

Peter Rodrick

November 29th, 2011

Your article is the second one I have read after just discovering the grid 960 system and being a complete novice found it gave me all the answers about the system! Great article

Vonn

December 10th, 2011

I came to this article hoping for a better understanding of the push and pull classes and I came away with that and so much more. Thank you so much!

vinod

October 9th, 2012

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 column’s 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.

Philip

March 12th, 2013

Good post, but not enough info on Alpha & Omega’s! Just a couple of brief paragraphs?! Please explain this much more deeply as it’s quite an important part.

The Push + Pull’s were well written though, good job, just more please!

lisa

May 29th, 2013

Thanks. This article was extremely helpful and well presented.

Ij888

June 9th, 2013

Splendid article, splendid! Thanks for posting this walkthrough.

namrata

June 19th, 2013

Thanks a lot for this article ! I was unable to understand anything before when i read other tutorials. and Now its clear ! :) thanks

Siddhartha

June 20th, 2013

Brilliant tutorial and hats off to you for making this so simple for me.

Leave a Comment

Subscribe to the comments on this article.