Menu

The 960 Grid System Made Easy

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.

This was published on Jul 12, 2010

147 Comments

Nagarjun Palavalli Jul 12 2010

A brilliant article. Not a lot of grid tutorials cover the basics this well. Thanks for posting this.

Waheed Akhtar Jul 12 2010

Excellent and very informative. Still it confuses me sometimes :)

John Polling Jul 12 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.

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 Jul 12 2010

Hi Joshua, thanks for your post! I’ll try soon!

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 Jul 12 2010

Marvelous article…
well done sr!

Philip Brown Jul 12 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 Jul 12 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 Jul 12 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 Jul 12 2010

this post more than describe, thanks for share

Pontus Ekman Jul 12 2010

Nice article with a great link collection at the end. Thank you!

Cosmin Negoita Jul 12 2010

Nice article :) I’m a big fan of the 960 GS!

Seth Etter Jul 12 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.

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 Jul 12 2010

Using those types of systems sure decreases development time.

Gavin Wisser Jul 12 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 Jul 12 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!

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

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!

I never knew push/pull and suffix in 960gs, thanks that’s really informative

Curtis Scott Jul 12 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 Jul 12 2010

Great article!

I have been looking around for something like this in order to get it explained to me :) Thanks mate!

Thanks a lot for the article. Really helped to grasp the idea of push and pull

Jae Xavier Jul 12 2010

I forgot about his grid system framework. Gosh I got too many things going on :P

Thanks for remind me Six Revisions!

sam as ive been looking everywere for a good tutorials and exsplanation on how it all works cheers 6R :D

S. Sharp Jul 12 2010

Absolutely awesome explanation of the 960 GS – you should teach!

mcometa Jul 12 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 Jul 12 2010

great article, i have use it on my blog. its very simple. thanks

wew, great article! thanks :D

aurel kurtula Jul 12 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 Jul 13 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 Jul 13 2010

I’ve used the blueprint CSS framework for my project but now starting review about 960 grid :)

very nice!i am study

Farid Hadi Jul 13 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.

Great post, I always love using the 960 grid system!!
Thanks for the interesting read!!

Jayphen Jul 13 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 Jul 13 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 Jul 13 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.

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!

Excellent read, I’ve just started using the 960gs and I had know idea about suffix/prefix and alpha/omega

thanks :D!

Excellent read, I’ve just started using the 960gs and I had no idea about suffix/prefix and alpha/omega

thanks :D!

Nottingham Jul 13 2010

Great post 960 grids is the way !

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 Jul 13 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 Jul 13 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 Jul 13 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 Jul 13 2010

Wonderful article; really useful (I’d say essential) information on how to make the most of a great resource, presented so concisely. Thanks!

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.

always wanted to know details about his grids.i have to seriously try this system.

Thanks sexy six :)

Rob Bell Jul 14 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 Jul 15 2010

Try also http://yaml.de/en/ – it’s a great html/css framework.

Jack Rugile Jul 16 2010

“Aha” moment activated.

Oliver N Jul 16 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 :)

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’

Great article!
Simply explained and very informative.
Thanks!

Sebastian Green Jul 21 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!

Great article. I havent gone much into 960 before, but will try it out now, as you have explained well.

Madisyn Jul 22 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 Jul 25 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 Jul 27 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

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 Aug 06 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.

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?

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 Aug 17 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.

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.

Thx for xplaining this to me! Plus some great grid resources in this article aswell

Claudia Sep 07 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. :)

Oi! Thanks for this! Bookmarked and printed out!

Lindsay Sep 20 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?

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

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

Darrell Oct 05 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 Oct 05 2010

Superb work geezer, and very helpful. :)

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

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/

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

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 Nov 19 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!

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 Jan 02 2011

Thanks very much.

Thanks for clearing this up!

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 Jan 13 2011

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

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 Jan 17 2011

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

Thanks

Francis Jan 24 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 Jan 24 2011

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

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

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

Michael Jan 31 2011

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

Dumbrava Razvan Aurel Feb 09 2011

Very helpful for me! Thanks!

thanks for tutorial .

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 Mar 09 2011

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

thanks for the explanation. very useful!

Michael Mar 14 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.

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 Mar 23 2011

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

it is not so bad…………

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 Apr 08 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 Apr 16 2011

Wow. Thanks! Very nice explanation. :D

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/

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

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

Hakim Sabri May 12 2011

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

hellsing357 May 23 2011

Great Article
wow

so that’s what 960 gs
is

“Eureka”

Nilamkumar Patel May 30 2011

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

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 Jun 08 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.

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 Jun 24 2011

That is very good!Thanks!

Nice one thanks a buch !! :)

Kishore Mylavarapu Jul 09 2011

Grid system is the best way to start web designing.

codecowboy Jul 13 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.

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 Jul 24 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 Jul 24 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 Jul 24 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 Jul 27 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 :)

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!

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 Aug 16 2011

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

Jared H. Aug 18 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 Sep 01 2011

Really Thanks

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 :(

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!

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

Puneet Sahalot Sep 21 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 Sep 29 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

thank you .. great efforts

Rajitha Oct 03 2011

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

Ariel leroux Oct 05 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.

very good explanation

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.

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

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.

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 Nov 29 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

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!

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.

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!

Thanks. This article was extremely helpful and well presented.

Splendid article, splendid! Thanks for posting this walkthrough.

namrata Jun 19 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 Jun 20 2013

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

This comment section is closed. Please contact us if you have important new information about this post.

Partners