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 ...
Overflow Hidden in .container
recommend Square Grid full width 980px try it http://thesquaregrid.com
Great write up! I just could never really wrap around using these on my projects. I should take a closer look at what you’ve come up with a try to use it on my next project.
overflow:hidden; doesn’t work in IE6, you need to add zoom:1; like it or not.
Is there any more detailed/documented information about your 978px grid idea?
As of right now, 960px grid system beats 978px because of its documentation.
And yes, I think it depends on the project as well.
I love the grid…. its definitely got a strong place next to the 960 that I have used for some time now…. BUT
The 960 grid has a setting where every block has a 20px left margin…. you stack them all together and you end up with a 940 effective width – but you need to use 980px to accomodate the margins. This is nice because everything is plug and play. Move your left hand block to the right and the margin stays the same.
In order to have this option with the 978px grid you need the 15px margin to stay even for the far left and right – this then ends up hitting 1008px used space…. meaning you break out of the 996px limit we should still be considering. (1024 x 768 minus the scrollbar). This might be suitable for some people – but I can’t help but feel its just a few pixels too wide.
I wonder if the maths allows a few pixels to come off this – perhaps I’m over thinking it?
I think it depends the project (service, product). But it looks like new designs support 978 – 980 px with main content 960px. I bit confused I guess
i think it depends on the project too. Im working on a site now and it’s about right for the content and scope of the site but generally, i feel 940 is a bit small..
We use a 985px content width for all of our site. This is based on the screen resolution analytical data we got from over 100,000 hits a day on several high street retail ecommerce sites. Works for us.
interesting post, I’m keen to try the 978gs
Square Grid is cool. Check it.
Well since centered layouts are more evil than web 2.0 & tables combined, 960 is outdated. But I think “web designers” just have too much time doing the easiest thing in computing.
Lets start designing sites that look good relative to the actual screen theyre being displayed on. Responsive design, people!
Interesting input! I think i’ll give the 978 a try.
thanks a lot of sharing with us
i think it is actually depending on the project…but new ideal will brings improvement…i support…thanks for sharing…..
greet! you are right!
Grid system’s are great if you design them from scratch using one of the psd or png files you can download from the website.
If you do not use them from the get go they are far more frustrating to use than writing css from scratch. One of our designers LOVES grids and will use it NO MATTER WHAT. I personally feel this is a really bad attitude and have had many an argument with him over it. Everything has it’s place.
When 960 first came up I gave it a go and did a few websites with it, but I have shy’d away from it now. Nowadays it’s either CSS from scratch (well.. using the template I’ve made of course), or it’s a 980px with 16 to 20 columns so I have far more versatility.
Maximising space on web designs is important. I wonder when 1024×768 goes the way of 800×600 and we start designing sites to 1280 screens..
Is 978 a safe width to use? I’ve always heard that 960 was the maximum witdth to avoid horizontal scrollbars across all browsers and OS.
Dangers of grids is that they may create a gridlock.