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.