For several years now the 960px grid system (960.gs) has been designers' favorite pick to help structure and design web layouts. As screens and resolutions have gotten bigger, I've found that the 960 grid system does not always fit my needs. 20px gutters and only a 940px content area is a bit too small for the modern web. While designing Themify, I found a new grid layout that works quite well for designing in this day and age. If you've never heard of 960 I've detailed both it and this newer gird system below.
Follow up post: The Simpler Grid
About The 960px Grid System
The 960gs is structured as follows:
- Total width 960px
- 12 columns @ 60px each
- Each column has 10px left & right margin which forms 20px of gutter space
- Total content area is 940px
The 960 gs is no doubt a very good grid system because of its flexiblility. It helps designers to quickly prototype the layout in any number of columns: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 col and so on. 960gs is probably the most popular grid system now and it has been used on many sites and design templates.
The Problem
The problem with 960gs is the gutter space and content width. Minus the margin space, the actual content area is only 940px. It worked well back then because most designs are set at 12px font size. These days most designs are set at 13px font size or higher. Since the font size has increased, don't you think we should increase the content area as well as the gutter space?
978 Grid
The grid that I use on Themify: 978px, 12 column @ 54px with 30px gutter space. I find it works quite well. It is still optimized for the 1024 x 768 display. I took out the left and right margins to maximize the content width. I increased the gutter width to 30px, so your content has more room to breath. The result below:
What Do You Think?
Darcy and I are considering the 978 grid as our standard grid for designing WordPress themes over at Themify. Do you think the 960gs is getting old and should we strive to come up with a better system? What do you think of the 978 grid? Post your thoughts.
Tips: this grid generator is very useful for generating variable grids.
Loading ...
What a lot of people are forgetting is that there are built-in classes to alleviate half the problems you described in this article or some of the complaints in the comments.
.alpha and .omega will reduce the margins on the front and back respectively of whatever column it’s attached to (e.g., class=”grid_6 alpha omega”).
Also, .push_n and .pull_n will extend your columns on the front and back respectively however many columns n you specify.
If you want a larger width, just go into 960 and find and replace the number 960 with 978 or 60 with 54.
People tend to forget that 960.gs has some varations:
– 12cols (as described)
– 16cols
– 24 cols.
Author of this post also forgot to mention that.
For me 24 columns grid from 960.gs is still the best one.
Not sure what you are comparing? Themify is a theme for WordPress? 960.gs is grid system to be used for any platform.
I use 1140px
960 is still the best, once we notice an upswing in larger screens hitting our site, then I might think about changing, but for now, still the best.
I don’t get the whole situation?! Whenever would someone use 12 columns? Or 16 or 24 for that matter? ’24 column layout’? Can someone maybe post a URL to a 24 column layout?
Interesting article. However, the 978 grid actually gives you LESS usable space for type when you factor in those 30px gutters in a 12-column configuration.
978px – (11 x 30px) = 648px
960px – (11 x 20px) = 740px
I’m sticking with 960gs.
960 may be get old but not the system.
Once you’ve decided what you want, you can use compass with blueprint and assign how large your margins are, how many columns you use and how large the grid is.
I find it pretty useful.
I think 960.gs has updated his grid with additional new one similar to u please check, both are nice to deal with .
I think I like the 978 better. In general this size will keep getting bigger as monitor sizes keep getting bigger and cheaper. Though laptops may continue to remain pretty small, that’s always something to factor in.
In most projects you need to include a standard sized banner in the sidebar. In most cases this is 300×250. I think the 960 grid system is more suitable for that.
I also think the 960px thing is a waste because what if you would like to add something to your site in the future and want to make it wider. Exactly you would have to start all over again. I prefer to use my own framework :)
I think I like the 978 better.
For 2 last years I came up with my own grid.
It’s 980px 12 column with 10px gutter.
Benefits: Wider, for more content. Standard width of all three columns 300px each so not only right banner is ok but all visual patterns you use as well. Pretty comfortable to shift from standard 8+4 to 7+5 columns. Like yahoo homepage or linkedin.com did for different reasons.
Especially good for large scale ia.
If you’re interested just find me on Twitter or Skype and I will send you psd
One issue I have with fixed width designs is how they appear on different monitor resolutions.
To be more exact, a 900px width might appear fine on a 1024 monitor, but there are a very high number of users who go to my website with larger than 1440 resolutions. I even use a 2000px monitor (thus some designs look horrible if not planned correctly).
Backwards compatibility is important, however some theme designs just don’t work well for users with the larger resolutions. To resolve this, I do encourage use of effective background images (appropriate alignment), and so forth.
really it is good thing to think of… but I feel 960 grid work very well…
Thanks for share..
I think saying the 960gs is old is slightly misleading. I think what this post should allude to, but doesn’t, is the fact that 960gs has become so successful, and that’s what makes it ‘old’. A lot of people use it as it’s quick and easy to develop against.Afterall the developer of the layout didn’t have to share it and no one forces you to use it. What you’re really getting at, is that it doesn’t fit every need, and as a designer it’s up to us to recognise when something will and won’t work on each project.
@Marcell – calling it a waste is a bit harsh. Someone’s made this and opened it up to others. If it doesn’t suit you it’s fine, use your own framework. That’s precisely what you should be doing, taking each project on its own merit.
Sounds interesting. I’ve been using the 960 grid system for awhile and I did found out that it doesn’t work with some projects but it never crossed my mind to use other grid system or even come up with a new one.
It depends on the project, and sometimes I use only parts of the 960.gs framework. But what really matters is designing a visual design that actually fits any grid in a way that doesn’t limit creativity, but releases it to be built faster, without missing subtle elements that would have destroyed the overall design without them.