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 ...
That poll is unanswerable like “Have you stopped beating your wife?”
I am liquid layout only. I believe it is arrogant to take over a user’s entire screen, so I never do. Plus small screens of mobile devices are trying to view those very same pages more and more. And remember TimBL invented HTML to be device independent — that is not a bug, it is a feature.
I think we should stick with 960.
Less Framework looks interesting, but is that working only for blog sites or does it work for any kind of sites? I’d be curious to see websites done with it.
Well, I love the 960 grid system. I don’t think it’s getting old to be honest. You’re very right saying that the resolutions are getting bigger, but to be honest, 960px width is best for all. I think that there are a lot of people that still uses 1024px resolution. I think that the 960 GS is ideal for blog design. Anyway, personally, I appreciate your and Darcy’s work :)
Damn, this site died almost a year ago. What happened to frequent posts and good articles?
I’ve been using linux for some years now. Since I started university though I started using win 7 on a 23″ monitor, HD resolution. What I started doing is have my browser window on the right half side of the screen and something else on the left side, usually an IDE. Now because of the window borders there is always a h scroll bar at the bottom of the browser. Because of this I’m considering creating sites at 920px wide. Even if we have larger monitors that doesn’t mean we will use the browser in full size because we love multitasking :-)
That’s my plan, any thoughts on that?
i still prefer cssMechano
http://www.cssMechano.com
You have a typo error (works quit well) Should be (works quite well) .
However, thanks for posting this I found this article really helpful.
A small point: the reason 960px is often used as the standard for “fixed” designs is not just because it fits on 1024×768 screens. It’s because 960px is easily divisible by 2, 3, 4, 5, 6, 8, etc., which makes it a very useful width, especially when you’re dealing with grids.
996px as an option ;)
In most cases the people that contact us do not have high-dollar screen displays or even moderate displays. Most of the people that view our website with fancy crap are other designers trying to snake us for leads. I could care less how their system references our sites, in fact I hope their legs grow together. In my experience most clients still have a large contingent of staff that have ie6 installed and a big fat monitor that takes up half their desk (including the post-it notes and family pictures tacked to the frame). It doesn’t really do us any good to keep up with the cool kids when are clients don’t have that equipment.
*our*
Thanks for the find boss… I never heard of 960 :-)
-Daniel
Appreciated all the comments. I’m writing a follow up article on this topic.
hi.. i’m using the 960gs. and as i read your article i got curious to work with your 978gs. where can i find a link for the grid sys?
hiho,
id like tom mention that also a grid of 987px would be a very nice thing because of the Fibonacci numbers of wich one is 987 and to work with the golden ratio in grid layouts as described at http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-2 makes it an consistant line over all
greets
tom
I might try it, but I think I will probably stick to 960 for now for the most, the extra few pixels don’t seem worth it for content to be butted up to the edges on 1024. I’ll wait for the next big jump. Ultimately it depends on the project and target audience though for the grid we use or don’t use if the case may be.
2experts,
The reason why 960 is a popular system is because IT IS considering the majority of the screen size that is out there, which is 1024 wide.
“All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.” -960.gs
I am assuming if all modern monitors support at least… 1280, this system will also adapt to the new standards.
Some of these comments seem pretty heated. If 978 doesn’t appeal to you, then use whatever you feel is best. I, however, think the idea is clever enough that I decided to start a fan following.
Here’s the site: http://978.gs/
Learn to use grids.