The 960 Grid System Made Easy

The 960 Grid System Made Easy
1 of 48
http://sixrevisions.com/web_design/the-960-grid-system-made-easy/#co...
Six Revisions
Skip site navigation
Home
All Articles
Tutorials
Freebies
About
Contact
Subscribe: RSS Feed
Follow on Twitter
Tweet
906
Like
242
The 960
Grid System Made Easy

Jul 12 2010 by Joshua Johnson | 142 Comments | Stumble Bookmark
advertise here
The first time I discovered the 960 Grid System, I was immediately excited about the possibilities of
implementing complex layouts so easily.
17-02-2013 22:13
2 of 48
However, since I was fairly new to web design at the time, when I downloaded the files, I quickly became
overwhelmed at how complicated the whole thing seemed.
With all this code, how could this be the easy way to create a layout?
This article is for web designers and front-end web developers who are interested in grid-based layout systems
but are at a loss on how to decipher them.
Well focus specifically on the 960 Grid System, but after reading this guide, youll find that most of the other
grid systems out there are similar and will make much more sense after you understand a few basic principles.
Grid-Based Design
Before we get into the specifics of the 960 Grid System, lets briefly discuss grid-based design in general. The
idea is certainly not something that originated on the Web. In fact, it stems from one of the oldest and most
basic design principles: alignment.
Our brains like to simplify things to make them readily understandable. This is why we try to impose order on
things that seem chaotic, like seeing a face in the craters on the moon.
Naturally, the easier it is to impose order, the quicker our brains can identify a pattern and move on. Grids are
so organized and orderly that they require almost no interpretation our part.
Consider the two page layouts represented in the image below.
17-02-2013 22:13
3 of 48
Though both of these images are simply a gathering of rectangles, the layout at the top seems fundamentally
better than the one on the bottom. We can instantly recognize a pattern, accept it, and move on.
The image on the bottom, however, is visually unsettling by comparison. Theres no clear pattern, order, or
goalits just looks like a random assortment of shapes.
Our eyes have a tendency to frantically search for fractions of a second while we attempt to identify a trend,
which increases the time necessary to take in the scene as a whole.
Its interesting to note that random can still be beautiful. Random definitely has its place in nature, art, and
even design, but its no way to logically organize information.
The point is that grids are among the simplest and strongest ways to create order on a page. They may seem
cold and rigid, but remember that they are both extremely efficient and effective, and can even be quite
flexible if you dont let your imagination get bogged down by the necessary structure.
Why Do I Need a Grid System?

The 960 Grid Systemand other tools and systems like itprovide 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.
17-02-2013 22:13
4 of 48
Before CSS3, it wasnt exactly easy to break up a page into columns without getting into tedious math.
For instance, if you have a 1,000-pixel wide container and you want to split it up into three columns, thats
333 and 1/3 pixel per column (not exactly a nice whole number). Further, columns broken up like this would
crash into each other, so a margin must be added on each side. If we add a 10-pixel margin to each side of
every column, we must also subtract that 20 pixels from the width of each column. This gives us 3 columns
roughly 313 pixels wide each with a margin of 10 pixels on each side (even then youre at 999px and not
1,000px).
Want 4 columns in a row below that? Then you have to start the process over and subtract 80px of margin
from 1,000px for a total of 920px and divide that by 4 to get a column width of 230px.
Finally, if you want to add a sidebar thats a third of the total width of the page, you have to create a column
thats 750px for the content and one that is 250px for the sidebar, then subtract 40px of margin to get one
730px column and one 230px column.
Confused yet?
Other web designers were too. Its not exactly rocket science, but its also not something you want to go
through again and again for each project that you create.
The solution? Find someone else to figure out all these crazy column widths, throw them into a CSS
document, and let you download it free. (That person happens to be Nathan Smith, creator of the 960 Grid
System).
The 960 Grid System
The 960 Grid System is simply a way to lay out websites using a grid that is 960 pixels wide.
The reason its 960 pixels wide is because the number 960 makes for a lot of clean divisions utilizing whole
numbers when factoring in column widths and margins. And it fits nicely on the majority of screens.
The 960 GS comes in two primary variants: a 12-column grid and a 16-column grid (a 24-column version is
included as well for those that really need extra control).
17-02-2013 22:13
5 of 48
In the 12-column version, the narrowest column is 60 pixels wide. Each column after that increases by 80
pixels.
So the available column widths are: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and 940.
Similarly, in the 16-column version, the narrowest column is 40 pixels wide and each column after that
increases by 60 pixels.
So the available column widths are: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880
and 940.
17-02-2013 22:13
6 of 48
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 divthats 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 pages
width, the trick to keep in mind is that the numbers assigned to your selected classes must equal 12 in the
12-column version and 16 in the 16-column version.
For instance, using the 12-column version, if you have 3 divs of text that you want to be displayed
side-by-side in a 3-column layout, simply assign the grid_4 class to each one to total 12 (4+4+4=12).
Similarly, assigning the grid_4 CSS class in the 16-column version makes it easy to create a 4-column layout
(4+4+4+4=16).
17-02-2013 22:13
7 of 48
To make sure youre referring to the proper classes, be sure to place your 12-column elements inside a div
with the class container_12 and your 16-column classes inside a div with the class called container_16.
If youve never worked with the 96 GS before, I hope youre having your "aha" moment right now regarding
just how easy it is to spec out a layout in no time at all using this system.
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, Ive 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 wouldve implemented the class push_2, and so on.
The push/pull system has major implications for how you lay out a page in your HTML document.
For instance, in the example below, imagine the websites name is typed out in a logo and placed as the first
element on the page.
As the most important element on the page, youd like to keep the logo as the first item in your HTML
markup, but visually, you actually want it to appear in the center of the page.
Before pushing/pulling:
17-02-2013 22:13
8 of 48
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

Youll 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.
17-02-2013 22:13
9 of 48
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 youll 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.
Lets Review
Armed with this newfound knowledge, you should now be a 960 Grid System expert.
To review, there are basically only 5 concepts you need to remember:
1. Use the container_12 class for the 12-column version and the container_16 for the 16-column
version.
2. Use the classes grid_1, grid_2, grid_3, etc. to set your column widths. If you want to fill a page
horizontally, make sure the numbers add up to 12 or 16 (i.e. grid_4 + grid_2 + grid_6 = 12).
3. Use the push and pull classes to independently position items on the page, regardless of their position
in your pages markup.
4. Use the prefix and suffix classes to create empty spaces in your layout.
5. Use the alpha and omega to fix the margins for any nested grid units.
There is also a CSS reset included with the 960 Grid System. This is a completely optional file based on the
ever popular Eric Meyer CSS reset. If you like it, keep it. If not, trash it!
960 Grid System Resources

Now that youre 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.
17-02-2013 22:13
10 of 48
The 1KB CSS Grid

An extremely lightweight grid system that is basic and easy to understand. Its highly customizable but
defaults to 960px.
Variable Grid System

A simple and flexible CSS grid builder based on the 960 Grid System.
17-02-2013 22:13
11 of 48
Grid-Based Design Gallery

If youre 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.
17-02-2013 22:13
12 of 48
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, youre still
being placed under restrictive confines. No one is suggesting that all websites should be created on a gridthis
would definitely lead to a widespread lack of creativity and lack of variation in page layouts.
Further, as you experiment with 960 GS, youll find that there are numerous ways to break the layout that will
force you to rethink your designs.
The 960 Grid Systemand others like itmerely provide a strong foundation for the numerous times youll
find yourself building a site that doesnt 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.
17-02-2013 22:13
13 of 48
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. Whats good about grid systems? Whats 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
Joshua Johnson is a Graphic Designer/Web Designer with over six years of experience working
with a major international marketing agency. He is also the Editor of Design Shack, a web design and
development blog. Check out his recent work and follow him on Twitter: @secondfret.
142 Comments
Nagarjun Palavalli
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
17-02-2013 22:13
14 of 48
Grid systems are very handy and should be used by everyone, however my overriding concern is how horrible
they make your markup. It seems that everyone is reverting back to putting layout information in their
markup and grid systems also produce bad cases of divitis and classitis. To get around this problem Ive
started to use Compass and SASS http://theled.co.uk/blog/archive/2010/06/18/semantic-960-gs-usingsass-and-compass/. It gives you the power of the grid systems without the horrible markup.
Rachel
July 12th, 2010

Ive 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! Ill try soon!
Niubi
July 12th, 2010

This has to be the first grid tutorial that Ive 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!
17-02-2013 22:13
15 of 48
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. Ive 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 its
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!
17-02-2013 22:13
16 of 48
Cosmin Negoita
July 12th, 2010

Nice article :) Im a big fan of the 960 GS!
Seth Etter
July 12th, 2010

Great read. CSS frameworks are extremely useful at times. Any abstract design Ive 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

Ive been using the 960 templates for layout but not for coding. Ive 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. Im
pretty new to web design but Im trying not to learn anything that Ill have to unlearn in the future. Whats
your take on the whole semantic vs. un-semantic argument?
17-02-2013 22:13
17 of 48
matt bridgeman
July 12th, 2010

Great guide, really useful! Ive 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 thats really informative
Curtis Scott
July 12th, 2010

Great article!
Ive been a web designer for over 9 years now and stayed away from this system due to what I thought was
17-02-2013 22:13
18 of 48
over complicated/unnecessary code code.

Your article alone broke it down for me (had my aha moment)! Youve 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
17-02-2013 22:13
19 of 48
July 12th, 2010

Absolutely awesome explanation of the 960 GS you should teach!
mcometa
July 12th, 2010

Great article. 960s 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.
17-02-2013 22:13
20 of 48
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 IDs 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, theres a huge debate on what semantic
actually means.
Im 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

Ive 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.
17-02-2013 22:13
21 of 48
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. Its the
same thing. People KNOW that inline style definitions are bad, so why cant 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. Lets 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 dont 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 dont? Ive tried it a couple times and it
includes a reset css and other perks. I thought it was pretty good!
17-02-2013 22:13
22 of 48
Amber Weinberg
July 13th, 2010

Am I the only developer who believes that grids and frameworks produce nasty, ugly, bloated code? If youre
a developer worth anything, your hand-written code should always be of much higher quality. Its 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
Youve 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, Ive just started using the 960gs and I had know idea about suffix/prefix and alpha/omega
thanks :D!
James
July 13th, 2010

Excellent read, Ive just started using the 960gs and I had no idea about suffix/prefix and alpha/omega
thanks :D!
Nottingham
17-02-2013 22:13
23 of 48
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 havent 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!
17-02-2013 22:13
24 of 48
Chris Spain
July 13th, 2010

Wonderful article; really useful (Id 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, its a great resource for grid based design and will certainly speed up development for
anyone who has not used it before. Its 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 Id downloaded the 960 Grid, I havent spent much time with it armed with
this tutorial, Ill be checking it out again. Thank you.
Mag Studio
July 15th, 2010

Try also http://yaml.de/en/ its a great html/css framework.
17-02-2013 22:13
25 of 48
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 didnt know about the push and pull
ability so thanks for pointing that out!
17-02-2013 22:13
26 of 48
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, Ive 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, heres a grid system I created a while back. Its 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-gridsystem-free-download , its free.
Keith Gorman
July 27th, 2010

Great article Joshua!
Ive been using the 960 Grid System for a while now, but this is the first article Ive 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
17-02-2013 22:13
27 of 48
July 30th, 2010

Thank you for this well written, clear article. Your approach lended to the ease of understanding this topic.
Im 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 nestingsI 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 thats a leading question
but I cant see why youd use one over the other. My mind is telling me its just a matter of personal choice
and nothing more. Would you agree?
Gemma
August 17th, 2010

Thanks for this article. Ive used the grid for layout purposes but not for coding purposes. Its 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. Theres no need to rely on other stuff
like SASS. And youll learn more about what youre 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
17-02-2013 22:13
28 of 48
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. Ive 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. Ive bookmarked this
for future reference because I know Ill be back. :)
Roxcar
September 13th, 2010

Oi! Thanks for this! Bookmarked and printed out!
Lindsay
17-02-2013 22:13
29 of 48
When I first read this I was like AH HA!! why havent I been using this all along?! Then I realized that this
code doesnt REALLY do anything for me because I have been able to create my own cross browser
compatible websites that LOOK like they were grid based but are soo much cleaner.
I guess the moral of the story is, if you can create your own, do it because it will be easier to understand and
more semantic I have never been a huge fan of developers using class on top of class to get things to look
the way they want, why not set an id or class and make it cascading?
Ben

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

Theres 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. :)
17-02-2013 22:13
30 of 48
nadeem
October 12th, 2010

nice article. Help me understand the nesting of grids quickly.
Essiew
October 27th, 2010

Thank you for a clear article. Ive started experimenting with it and found there is one problem that hasnt
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/equalheight-columns-with-jquery/
binam
November 4th, 2010

Excellent definition about 960
Thanx a lot!!!!!
robert
November 15th, 2010

Please help!!! I cant 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
17-02-2013 22:13
31 of 48
Okay, its a bit late, but finally I recognized that I cannot leave the 960gs unattended for time sake. Thanx for
this breif introduction!
Goldie
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 cant get the grids to show up on a background div. Ive 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
17-02-2013 22:13
32 of 48
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 cant 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, Im 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 its confusing in the first place.
Joshua Johnson . youre the man!!!! And thank you for sharing this sweet golden knowledge.
Francis
17-02-2013 22:13
33 of 48
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
17-02-2013 22:13
34 of 48
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 dont 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
17-02-2013 22:13
35 of 48
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);?>
17-02-2013 22:13
36 of 48
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
17-02-2013 22:13
37 of 48
A brilliant post. I have got full idea of this as I think
Hakim Sabri
May 12th, 2011

Thats amazing! Cant believe I just heard about this. Thanks very much for the article..
hellsing357
May 23rd, 2011

Great Article
wow
so thats 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
17-02-2013 22:13
38 of 48
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 wasnt 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 didnt 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
17-02-2013 22:13
39 of 48
July 13th, 2011

What is the recommended way to insert vertical space above a child div? Ive 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 youve managed to show that its
beautys in its simplicity :)
Ive 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: Lets 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
17-02-2013 22:13
40 of 48
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 cant 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 cant 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 Dreamweavers 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.
17-02-2013 22:13
41 of 48
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?
17-02-2013 22:13
42 of 48
- Is 960.gs still the valid in light of SASS which I am now just looking into?
Thanks!
Craig

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 wasnt 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

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

thank you .. great efforts
17-02-2013 22:13
43 of 48
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 Ive found on the 960 grid. It may be great that hes put together that page,
but as a quick reference Im 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, Ive 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?????..
17-02-2013 22:13
44 of 48
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 Ill 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 Ive 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
17-02-2013 22:13
45 of 48
this gives in brief explanation for the starters to fix there designs with 960px if im going with 1003px then grid
framework need to fix to the base of it the design should be made in same sizes when planning for 960px grid
if the design is complex this can create lots of complex,
I better stick to my own size design that base on requirements as i receive instructions when i propose a
design to client some time the width of the columns to be reduce rather then the size 960 grid specifies.
thanks for the prototype in brief to understand css grid frameworks, Boilerplate and css3 grid may help us.
susant
February 17th, 2013

Your comment is awaiting moderation.
Very Informative Article. As I am new with html5 this is very useful for me. Thank you for posting this
Leave a Comment
Name (required)
email (will not be published) used for Gravatars (required)
Website
Subscribe to the comments on this article.
17-02-2013 22:13
46 of 48
Advertise Here
Advertise Here
Search
Topics
AJAX
CSS
Design Showcase / Inspiration
Flash
Freebies
Graphic Design
JavaScript
Mobile
Photoshop
Project Management
Resources
Tools
Tutorials
Usability / Accessibility
User Interface
Web Applications
17-02-2013 22:13
47 of 48
Web Design
Web Development
Web Standards
WordPress
Recent
Lessons We Learned from Our Biggest UX and Design Mistakes
A Comparison of Methods for Building Mobile-Optimized Websites
The Winners of Dot Grid Books from Dotgrid.co
Free Download: WinX iPhone iPad Video Software Pack (Worth $89.85)
Giveaway: Dot Grid Books for Designers from Dotgrid.co
Partners
Friends
1stwebdesigner
Addictive Fonts
AddToDesign
App Sheriff
Blog.SpoonGraphics
BrushLovers
Burbia
Chris Wallace
CoolHomepages
CSS Globe
Design Bump
DesignOra
DesignM.ag
Desizn Tech
fudgegraphics
Function
GraphicsFuel
iBrandStudio
InstantShift
LaptopLogic.com
Marcofolio.net
MyInkBlog
Naldz Graphics
NETTUTS
N.Design Studio
Noupe
Onextrapixel
ProductiveDreams
17-02-2013 22:13
48 of 48
psdfan.com
PSDVIBE
Queness
[Re]Encoded.com
Smashing Apps
Smashing Magazine
Stylegala
Speckyboy Design Magazine
Stylized Web
Technology.am
TheBestDesigns.com
Vandelay Design
Walyou
Web Designer Help
Webdesigner Depot
Web Design Ledger
Wordpress Themes Shock
WPBeginner
Become a Facebook Fan of Six Revisions. Advertise - Contact - RSS Feed 2008-2013 Six Revisions. Six
Revisions mobile version by Mobify.
17-02-2013 22:13

The 960 Grid System Made Easy

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

The 960 Grid System Made Easy

Загружено:

Авторское право:

Доступные форматы

The 960 Grid System Made Easy

Grid System Made Easy