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 ...
I really use 960gs. You want to use 960 abandon and i am working in website template design company it should be very professional in next few year
I have to ask, am i the only one who has ever used the configuration available at 960.gs? It suggests 940/20, sure… but lots more is possible!
Nice idea but what about mobile? I know that iOS devices display at bang on 960px width (not sure about Android) so won’t this mean we are clipping off bits of content on these devices?
1998: fixed grids
2004: fluid grids
2008: flexible grids
960gs isn’t only 12 columns.. the 960.gs has templates for 12 24 or 16 column grids. But the whole point of the system is that 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.”
Which means you can easily have a 24 column grid, 6 column grid, 8 column grid, 32 column grid or whatever. Although i agree that 940px content area is sometimes a bit small, due to its flexibility i dont think the 978px grid will be taking over anytime soon.
I think your logic is wrong: The 960 system is based on the fact that a 960px wide canvas means you’ll fit on most (desktop) monitors in this day and age, rather than font size. There’s no reason you can’t use 13px+ font sizes at, say, 760px.
I think that what will date 960 is the move to more flexible layouts that cater for a wider ranger of devices (especially mobile). Adding another 38px to the canvas doesn’t make much difference.
We’re in the middle of a redesign on our app UpShot and we decided to use BaselineCss (simple, html5, light).
The base width is 960 and instead of changing the grid width we are changing the visual sugar place. Basically it means that we really use 960px for content and moved our sheet design outside.
Our users are mainly webdesigners so it’s okay on their big screens and users under 1024 might be under ie6 too so they don’t have sugar anyway ;)
@Nick You can still use the columns, gutters and widths of 960gs and make it wider or narrower (depending on the project) just by adding extra columns or by removing existing ones.
For example (optimized for 1280):
960 + 80 = 1040
960 + 2*80 = 1120
960 + 3*80 = 1200
Fine, I’ll say it. Stupid post based purely on personal preference, with an exaggerated title, just to get traffic. This article sucks.
Div within Div within Div within Div within Div
What happend to the separation of content from structure (presentation)?
It makes a mockery of those who wants to avoid Tables at all costs. If you don’t like tables, use CSS Tables instead.
Pop up a box if the user is using IE7 or less and instruct them to upgrade to a better browser.
By the way I use table less layouts on 90% of websites I build. Just to shut every one mouth who start complaining.
I think YUI grid is a God send for me. I will have a look at 960grid and see what the fuss is all about.
Not sure the extra 18 pixels is worth blogging about IMHO. Especially when (as mentioned) flexible grids are available anyway.
Personally, I do not use grids at all but as the survey suggests it depends on the project :)
Not sure if these has been posted already, but http://lessframework.com/ looks pretty neat (hint: try resizing your browser)
Blueprint (via the BOKS application) works best for me. Width can be set at will, number of columns can be any number starting from 1 to …, and it has multiple combination for width+gutter.
I’m personally sick of everyone using the grid system – it is making all of the websites stale and common. It’s time for everyone to break free of the grid system and come up with original ideas and design.
@Lucas That logic doesn’t really work. How can a grid system make websites stale and common? Are all print magazine layouts using say a 24 column grid on A4, stale and common because they use the same number of columns in the same width?
It depends on the project and I find that doing my own CSS is always been the way. I do however always make my own grid system and then just apply that.
I have considered using a framework but most of my work is converting designers psd’s to html for wordpress. Many[I mean, many] designers have no idea what the 960 system is, or they create more free-form designs that do not follow any “structure”, therefore, most frameworks are useless for these projects.
I also think frameworks limit creativity for designs other than a magazine layout perhaps.
There is nothing as flexible as understanding raw CSS that YOU write IMO. Too many new coders relying on frameworks before they even understand what float:right does.
great info. thx
I’ve always been a bit reluctant to formally work with the 960. Partly because wireframing programs don’t have any sort of overlay for them and partly because I rarely work on anything outside the one column & sidebar or one column and 2 sidebar fields. But great post and a great rethink, there’s definitely some teeth to your concept.
Didn’t find it interesting and didn’t understand the subject.