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 ...
problem with 960gs is that its not fluid.
in todays era when everyone have 1080p monitors as well as a smartphone you need to make adaptive layouts.
I use 960.gs for a while. I tried also blueprint, yui and a object oriented css grid which has only 14 lines!!! of css code. Each of these grid systems has his own pros and cons and it depends on the project you have.
- Do you need to have borders or shadows on your boxes.
- Should the layout be flexible for different screen width especially for mobile.
- What about system font size. With larger screens with higher resolution users might use bigger font sizes on their system.
Just to name some of the things I have to consider…
I select always one system and use it unchanged to get the benefits of easy updates. Then I add to a custom css file the classes i need to change. E.g. grid_24 width 980px (+20px of the original) and grid_12 width 480px (+10).
Thats it.
Please tell me if i am being a little naive but will increasing the width by a mere 18px make that much of a difference.
However in an almost contradictive manner I do find the outside margins of the 960.gs a little annoying (only giving you a true 940px workspace).
Interesting post anyway. Always enjoy your work.
I am using 1000px layout fully visible on 1024×768 monitor. Extra 24px are enough for vertical scroll bar and with the browser window maximized there is no horizontal scroll bar. Example: http://www.evestyle.com.pl
Erick S. You’re missing the point with grids, if you have a 16 column grid you might not necessarily use a single column, but the more columns have the more flexibility you have to use combinations of these columns to create layouts, so you might have one page using a 4 col sidebar, 8 col main content & 4 col another sidebar and then another page using 4 x 4 text columns, etc etc all using a base 16 col grid.
960grid is not necessarily old…
I think it always depends on the project -some designs are seem to be ‘in-your-face’ when the width is (too) wide.
I work with mac (most of designers too I bet) & because of that we might wanna design a wide, full-width, etc layout – problem is, majority of people are using pc/windows..
oh well, I am just saying..
I never used a grid-system when designing a website, but it seems to me that the grid system really depends on the site that is being built.
Can’t you just use customized 960? They offer a tool that lets you set your own column widths and gutters. Also @Anandasama (#41) – you can get 960GS Fluid version somewhere around internets, just Google it.
I use 960 as well, and always found it a good basic start. While working with it, I twick it from time to time as the needs change. You can also try using http://www.spry-soft.com/grids/. You can change grid and gutter width.
I’ve always felt that the 960 grid is small. I prefer to use 980px as my max width. Content will still fit in your usual 1024px wide browser without a horizontal scroll bar. I never really understood why 960 was the magic number for everyone, you mustn’t be afraid to dream a little bigger.
I think we’re going to be seeing the opposite problem: with so much content being read on mobile phones and now on the iPad (and even paying consideration to the crappy view offered by most netbooks), I think we’re going to be seeing more and more single-column layouts. The outer portions of the “page” may be decorated or filled with imagery, but the main content needs to be able to flow into these smaller viewports.
I love the 960 grid… been using the 24 grid for some time now, and I love it. I would love to see a 24 grid that is fluid.
I have never used grid system :)
Is grid always a necessary thing when you design a site?
What’s the main purpose using a grid system?
Thanks
I approach each project as it’s own thing, so I don’t use a grid system.
I don’t use the grid system but I would say it depends on the project.
While i agree that the 960 is somewhat constraining at times, what I hate more is un-rounded numbers, especially when designing for a CMS. The beauty of 960 is that all the columns are even and if you practice pixel perfection that is important.
Like Brett said above, you can always go to 980.
960 px may be it’s not old
The 960 grid is a great starting point for rapid developement and even better for creating fast mockups without having to put too much thought into the mechanic. As designers howver, we need to consider that it is content and purpose of a site that ultimately determines layout.
Another solution
Fluid grid system
http://fluid.newgoldleaf.com/