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 ...
Looking to downloaded the 960gs template to retro-fit a micro site into a pre-existing 960px site I came across this thread and thought I’d chime in. I feel that 960 sites tend to look a bit dated in today’s webspace and bumping them up to 978 isn’t going to change that (though we must acknowledge that this is an old post). That being said, to the comments above which herald the end of grids, grid based design has been around long before websites and, thankfully, will be around long into the responsive future.
Honestly, call me a weirdo or whatever, but I’ve always found the 960gs to be gapingly large. I don’t care what the screen size is, it’s a sprawlingly loose and overly wide format. Hate it. Always have hated it. And I especially hate the way today’s dribbbble generation clutches onto it as if it’s some kind of a merit badge and validator of one’s status as a designer. 960gs is a nice timesaver, sure, and there’s instances where it works out just fine, but god damn….
OK, two years on from this post I thought I would still chip in with my idea, it’s seems it’s still quite a hot topic.
I’ve generally not used a grid system until recently and I find them rather intuitive, but I can’t stand the width – 960 is too small for me. What I’ve done is taken the foundation grid system, then I just modify the .row width to 100% and the max width to 1140 which is my generally preferred width. I think 960 is becoming back in fashion again to get that chunky margin down the edge even when on a tablet, i don’t rate it too much. by increasing the size of the .row class it increases the left and right margin but also increases the gutter size and the column size and the page seems more airy. Unless a client asks me to decrease I usually use this as my base.
You could definitely see your expertise within the work you
write. The world hopes for even more passionate writers like you who aren’t afraid to mention how they believe. All the time follow your heart.
Great article. I’ve been wrestling with this issue myself in deciding whether I want to adopt a CSS framework like Bootstrap for my projects. On one hand I love the freedom of being able to design every site from scratch and build a custom “grid” for each project. However, adopting a framework could definitely speed up development and ensure my sites look good on a wide variety of devices. I’m personally not sold on the whole “responsiveness” idea yet because I believe web sites should look the same on all devices (personal opinion) to preserve brand identity and site familiarity.
Anyway, great article! You’ve given me a lot to think about.
Great piece of work man!
Thanks for sharing this wonderful post with us.