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 ...
thanks for the link… surely i’ll gonna try to use it. and compare both.
Hmm…..Now this is debatable. I’ve only really managed to start using 960 the last few months, and it is kinda tricky to get to grips with it yet it makes for cleaner layout. I would like to break from it a bit and make something slightly different ie a 920px or 980px grid system, or similar, could be interesting ;)
Me eiather! Thx alot for bringing this up!
/MoShO
Thanks for the find boss
Great idea. I think the layout really depends on the type of project you are working on. Keep in mind that there is still a big area of sites that still don’t even use grids yet. So to me, to think about modifying the 960 grid to something different can be considered a sense of fringe design. A cool idea but dependent on the project you are working on…
I use the 960 in all of my designs… I have just found that it works. Sometimes I feel limited by width, but it doesn’t stop me from expanding my design. Just because the red columns stop, it doesn’t mean my design is restricted. Interesting post however, If i have time this week I will check out the 978.
I think Stefan (comment #20) nailed it – I fail to see why 18px makes a difference. Especially if you have a larger screen resolution – all the more insignificant 18px will be.
18px difference? That’s it?
My biggest concerns with fixed grids are that they are… fixed :)
For me, I don´t know what is hardest – make a tight frontend ready for all screensolutions, textsizes etc etc in a fixed layout or learn liquid-layouts with custom designelement that is hard to stretch… anyhow – a bigger grid is needed. Thank you!
Check out this cool grid system:
http://thesquaregrid.com
It’s pretty new and clever. I will definitely try it out.
Why would you need so much space for your gutter (30 px)? Doesn’t that eat into your content space? A range of 16-20px gutter seems fine to me and a lot better than 10 px.
This is nescessário, never used and I see no advantage grid ….. show me a site that uses this technique ….. vlws
Its great posting about this grid system..Its very useful to us..Thanks for share
woowww perfect thanks admin
I think this is very much dependent on the project. But clearly evident, add padding to the container is more correct than the columns.
I feel it absolutely depends on the project. Cant restrict ourselves to 960 grid system. good post though!
i like the 960px grid :-/
975 was my guess back in the beginning of this year. This is before I knew what a “grid system” was. I guess I was pretty close! Here’s the article: http://teknekwebservices.com/blog/informative/what-is-the-best-size-to-make-a-website/
Me and my friend were arguing about an issue similar to this! Now I know that I was right. lol! Thanks for the information you post.
Looking at the markup generated by that 12 column generator appalls me as a developer and designer. There’s literally no need for the almost 20 empty div containers it creaters. You can remove every one of those and add an “overflow:hidden;” style to the container and it will render exactly the same, load faster due to less markup, and makes it way easier to read. This works in every browser going back to IE6.