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?

960 gs

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:

978 grid

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.

[poll=21]

268 Comments

1 11 12 13
  1. Kenny Scott
    Mar 20, 2012 @ 7:29 pm

    For me the big issue is having clients that don;t fully understand the importance of content and write it off as something useless…god knows why, but, using a larger width for me means WAY to much whitespace half of the time so 960 is perfect. On the other hand, for personal things, i prefer 978, i find it is a little more asthetically pleasing (to me) with a little more space between multiple elements…So i suppose, the proper answer for me is it is dependent on the project…

    Reply

  2. Kenny Scott
    Mar 20, 2012 @ 7:34 pm

    Having said that…with the introduction of better support for CSS3 and a growing popularity of responsive design, one could argue that the system of choice will soon be just a matter of preference as more and more designers and clients catch the responsive wave, along with the rapid amount of users purchasing various types of devices for browsing, from smart phones to big screen TV’s…

    Reply

  3. sakhsen
    Apr 11, 2012 @ 4:28 am

    The 960GS is still the best. Though today websites come with higher fonts or people use higher resolutions, this 960 system will fit into any kind of client browsers. It is good for web designer as well as browsers.

    Reply

  4. Tim Nicholson
    Apr 11, 2012 @ 2:11 pm

    I found this 1140px grid that looks like it would work great. Obviously its wider, but is also fluid so it adapts for smaller screens. http://cssgrid.net/

    There are a couple of things that I don’t like about any of the grid systems. Its practically impossible to use any horizontal lines. I also don’t understand why they aren’t built with equal left and right margins on the columns, which would help in this respect and also help if you had a column that was colored and you wanted to split the margin in two.

    Reply

  5. Wes
    Apr 28, 2012 @ 4:26 pm

    You’re asking the wrong question. Ask for yourself, does a regular computer user have a monitor as big as ours for higher resolutions or not. That’s really the only thing you are addressing about 960gs.

    Reply

  6. Ali Reid
    May 2, 2012 @ 11:00 pm

    While 960 is a good benchmark for safe-width, I think that its too wide for most uses. For the same reason that people advocating 16pt type on websites are mostly wrong.

    Remembering that line length should be around 50-60 characters for readability, if you are using 13pt type, your body column will barely fill half the width. That encourages people to go for 3 columns. I think this is bad. You could use bigger type, but this means a) more scrolling, and b) wider images in that column, if you want to use full width images, as most do.

    The problem with wide images is that, aspect ratio being fixed, they are also taller. That means even more scrolling. A wide column with a portrait image in it wont even be visible all at once on a netbook, or a landscape tablet.

    Given these issues, what arguments are there for going wider? so the logo can be bigger?

    I think that the site width should be a function of content. So generally, two columns, in a third: 2-thirds ratio, should give you a width of about, oh…768. Which magically enough, is the width of a portrait iPad.

    Boom.

    768 is the new 960.

    Reply

    • Simon
      May 15, 2012 @ 11:10 am

      16pt on website is not wrong, its noted for a reason, readability. 16pt font means your line lengths will be shorter by character (same actual width). Shorter is not an issue, its longer line lengths that are hard to read because the eye has farther to trace back one the eye has reach the end of a line.

      So yes, line length should not stretch the entire length of a 960 grid. That doesn’t make the 960 grid invalid. Any respectable designer would present the content with appropriate line lengths.

      You argue that scrolling is an issue, yet you also argue for a 768 grid which forces all content into a more narrow space. Leading to more scrolling with the same amount of content.

      A portrait iPad is NOT the screen size for the majority of users. Most users are using either 1024×768 or 1366×768. Where width is the dominant value. Therefore a wider grid makes better use of screen resolution than a narrow one. You can always make the primary content of a 960 fit into 768. But to limit the layout to 768 is counter productive.

      Reply

    • justintime
      May 23, 2012 @ 4:46 pm

      LOL 768 is from old days of 800×600 as a safe mark. Stop trying to find The Meaning of Life in iProducts.

      Reply

  7. Steven Kropp
    May 17, 2012 @ 9:09 am

    As a graphic designer turned web designer/ developer over the last 3 years… it seems to me there are too many –“standard rules”– when it comes to the layout… this is in response to many of the comments I’ve read on here (everyone seems extremely old-school)… Basically, the way I look at it, as long as the width is less than 1000px and more than 950px… who cares! this whole talk about standard column width and 12 column, 16 column is garbage. My #content and #sidebars are measured by the old eyeball, and what looks good to me, depending on the type of literal content I’m working with… I don’t know, maybe I’m just weird ;)

    Reply

  8. oscarcho
    Jun 5, 2012 @ 11:40 pm

    Yeah, 18px width really makes the difference in a 1920×1080 monitor.

    Reply

  9. Luke
    Jul 29, 2012 @ 11:28 am

    Guys, there is NO standard, period. It’s up to each developer making a decision based on the clients need to set what width, font-size, text spacing, line-spacing, etc., that needs to be used. If a developer wants to use a fixed width, that is his standard. Personally, I am using the 960 grid system and will continue until the worldwide stats on browser display resolutions gives me the feedback that I need to move to a larger grid system. The one thing I have learned in my years on the internet, since the beginning, is that nothing stays the same for very long. :)

    Reply

  10. lenx
    Sep 13, 2012 @ 6:30 pm

    well 940px width is good for content…. but theres is a framework called skeleon now some designers use it. i dont like it . its too amateour. my fav still 960 gs. im wondering, is it possible to design full background template with 960gs? how?

    Reply

  11. Laurence
    Sep 24, 2012 @ 11:03 am

    Why is 990 not mentioned? I think its best to try to make the most of a 1024px width, the wider the better, with a small gap either side, so 990px fits nicely leaving enough room for the vertical scrollbars without the horizontal ones appearing.

    Reply

  12. Patrick
    Oct 1, 2012 @ 2:16 pm

    While I do think it’s important to keep to a grid system for aesthetics, it’s becoming less important to worry about the overall width. 960, 978, 1140 – whatever. What should really be embraced is responsive design. While it’s common now to find 1080p monitors on desktop computers, and laptops 1280px or wider, a bigger grid does make a lot of sense. However, more and more people are browsing the web on portable devices these days. Smartphones and tablets are where web designers need to focus the most, meanwhile keeping an attractive look for bigger displays. in 2012, there should be no reason why I can’t choose a 24 column 1860 grid and make it responsive for smartphones and old 800×600 CRT’s alike. Why not?

    Reply

  13. amik
    Nov 26, 2012 @ 10:59 pm

    responsive design solves everything. grids are still useful but the really great sites just shift infinitely no matter how big or small.

    Reply

  14. Ruffo
    Jan 28, 2013 @ 8:38 am

    I people, I’m from the future, and 960gs it still being used.

    Reply

  15. jeff
    Mar 17, 2013 @ 5:08 pm

    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.

    Reply

  16. Afzal
    May 28, 2013 @ 12:25 pm

    Thanks for sharing this awesome giveaway sir,its really helpful for all of us.

    Reply

  17. Dymo Labels
    May 31, 2013 @ 2:25 am

    hello sir
    i really like this post
    Thanks for sharing this awesome giveaway
    thanks

    Reply

  18. EricC
    Nov 27, 2012 @ 1:52 pm

    That’s another topic…
    If you think we should make a separate design for mobile devices, then we should also probably use a 1140gs instead of the 978 for desktop computers and laptops ? Then make another design for smaller screens and so on…

    Reply

1 11 12 13

Leave a Reply