Last week I talked about 960 Grid System is Getting Old. Surprisingly a lot of comments have been made. It seems like people are using 960gs because of the "golden ratio" — all numbers are even. I’m a designer, not a grid scientist. Why restrict your layout so that it can fit into this 960gs? A grid is supposed to help you in design, not to limit your creativity. The 978 grid, that I mentioned before, is not just about increasing the page width, but to loosen the gutter space so users can read it more comfortably. Today, I would like to write a follow up post to further ellaborate on some of the points I brought up initially.

Problems with 960.gs

Narrow Gutter Space

I did a quick Photoshop mockup to show how 20px gutter space would look like on 960gs. The gutter is a bit too narrow for modern design.

narrow gutter

To solve this small gutter problem, a lot of people add padding to either the content area or sidebar containers, making that subsequent content area smaller.

narrow gutter solution

Unnecessary Left and Right Margin

To those who don’t know, the content width in 960gs is actually 940px, not 960px. It is 960px because of the added margin space on the left and right. Some people argue that this margin space helps visibility on mobile devices such as the iPhone and iPad. Technically, if there is a margin required, it should be applied on the container, not the columns.

unnecessary margin

Too Many Classes

Visual aesthetic might be a personal biased but, even so, there seems to be some fundamental CSS issues as well. Below is a sample case. To achieve the layout result I’ve designed here, with 960gs, you will be required to add extra CSS classes: alpha, omega, and clear. The alpha & omega class is required to get rid of the margin space on the left and right hand sides of the columns. A clear class is also required to clear the floats after each row of columns.

too many classes

The Simpler 978px Grid (demo)

The 978px grid that I mentioned in my previous article got rid of the unnecessary left and right margin. As a result, the content width is increased by 38px. The gutter space has incresed from 20px to 30px. It still fits in the 1024 default display and the columns can be divided in any number of ways: 1/11, 3/3/3/3, 4/4/4, 3/9, etc.

978 grid

978px HTML & CSS (demo)

The following is a simpler CSS grid that Darcy and I came up with and deals with scenarios, like the "Too Many Classes", in an elegant way. There is only a left margin on the grids which creates the gutter space. Grid12 is not required because grid12 is the width of the container. There is no .alpha or .omega class, but a single.first class required for the first column in every new row. The purpose of the .first class is to clear the floats and get rid of the left margin space. Since the .first class clears the float, a.clear class is not required after each row.

.container {
	width: 978px;
	margin: 0 auto;
}
.grid1, .grid2, .grid3, .grid4, .grid5, .grid6, .grid7, .grid8, .grid9, .grid10, .grid11 {
	float: left;
	margin-left: 30px;
}
.grid1 {
	width: 54px;
}
.grid2 {
	width: 138px;
}
.grid3 {
	width: 222px;
}
.grid4 {
	width: 306px;
}
.grid5 {
	width: 390px;
}
.grid6 {
	width: 474px;
}
.grid7 {
	width: 558px;
}
.grid8 {
	width: 642px;
}
.grid9 {
	width: 726px;
}
.grid10 {
	width: 810px;
}
.grid11 {
	width: 894px;
}
.first {
	margin-left: 0;
	clear: left;
}

The Simpler 940px Grid (demo)

If you really want to keep the golden ratio, you can achieve the same result with this simpler grid. For those that argue the left and right margin is required to prevent the content from being trimed off in the mobile devices should think about appling that space to the container, not the columns themselves.

Conclusion

Don’t force your design to fit to a grid that hinders your creative genius. Do what makes your designs look good and is comfortable to you. A grid should be your layout guideline, not restriction.

214 Comments

1 9 10 11
  1. Alberto "Raben" Macaluso
    Jan 25, 2012 @ 11:31 pm

    I’m sorry but this system is now obsolete! :) Now we need to start using the responsive design…
    and what do you suggest to us about this “new method”?

    Reply

    • Dee
      Feb 21, 2012 @ 1:11 pm

      If you go to http://cssgrid.net/ it’s a pretty good system.

      Reply

    • Troy
      May 16, 2012 @ 6:06 am

      Responsive designs are terrible. Why on earth would you want to render full images to run full code on mobile devices? Granted, it may work on some sites, but anything serious will not want to use a responsive design.

      You are far better using m.domain or similar. Hense why any good site will do just that.

      Reply

      • Nate
        Jul 18, 2012 @ 9:49 pm

        I’m sorry but you don’t understand responsive designs.
        They don’t render full images, or run full code they scale.

        They start with a mobile first design (less code) and add upon that.
        Personally I think it is foolish to not make your whole site mobile – it will be increasingly common for your site to be checked by mobile devices.

        The images are dynamically scaled – so it loads the right images for the right screen.

        Reply

        • Rob
          Aug 19, 2012 @ 5:10 am

          @Troy

          I disagree with your statement that a special subdomain with a spearate website which is optimized for mobile devices is the best solution.

          Nobody wants to maintain an entire website twice, right?

          To work on two content-management-sytsems (which most clients want) is just a waste of time. Time nobody has (at least my clients tell me that they have no time).

          And Google prefers mobile devices and advices not to have two URLs and two websites with the same content.

          https://developers.google.com/webmasters/smartphone-sites/details

          Good sites, as you call them, are responsive.

          Reply

  2. andrew
    Jan 26, 2012 @ 7:38 pm

    I’m sorry but all the css frameworks sucks, I better start from zero, every project is different

    Reply

  3. Griz
    Apr 5, 2012 @ 9:01 am

    Nice!

    This article inspired me to create a tweaked, smaller version of the grid that can be easily added to an existing WordPress theme :

    http://computingvoyage.com/1240/a-simple-css-grid-for-your-wordpress-theme/

    Reply

  4. Posicionamiento web
    Apr 26, 2012 @ 11:20 am

    Hola, muchas gracias por el post, si que esta interesante.

    Slds…

    Reply

  5. Jake
    Jun 6, 2012 @ 9:32 am

    I made my own custom css grid, depending on the desired width.. what i did is i pick some of the css coding/technique in 960 grid and innovate it.

    Reply

  6. Burby
    Aug 7, 2012 @ 2:07 pm

    I’d like to point out the significance of your conclusion and repeat it over and over. Let’s try to escape the out-of-the-box mentality and design layouts and grids according to the content and the job at hand. Force feeding content into a grid-package may be easy, but in the end, it only hurts the design. And the client. And my heart. And it makes my cats howl strangely at night. :/

    Reply

  7. Dymo Labels
    May 31, 2013 @ 2:23 am

    hello sir
    i really need for simpler CSS grid
    thanks for sharing
    thanks

    Reply

  8. diseño web
    Jun 1, 2013 @ 12:53 pm

    your simpler css grid is really superb. You are very good in explaining things. good job

    Reply

1 9 10 11

Leave a Reply