An Introduction to Grids in Web Design

“A two-dimensional structure made up of a series of intersecting vertical and horizontal axes used to structure content. The grid serves as an armature on which a designer can organize text and images in a rational, easy to absorb manner.” – Wikipedia

The grid is an invisible structure that collects all the elements within a web page together. Grids are never properly visible, however traces of the grids’ “discipline” can be seen by the placement of elements within a web page. The grid also dictates the size of such design elements as widths of column texts, repeated placement of elements, padding around imagery, word spacing, line height, etc. A grid’s main goal is to create a connection of unity within a design, which in turn makes web page content flow better, producing a more readable and enjoyable web page design. Alex White’s Elements of Graphic Design explains the use of unity through a grid:

“Unity in design exists where all elements are in agreement. Elements are made to look like they belong together, not as though they happened to be placed randomly. (…) So, without unity a design becomes chaotic and unreadable. But without variety a design becomes inert, lifeless, and uninteresting. A balance must be found between the two.”

However, the benefits of a grid on a particular design will only take effect if the grid is used at the initial stages of the design process. Attempting to implement a grid into an existing design will not create the same fluid layout or unity of content. This issue is discussed in Josef Muller-Brockmann’s Grid System is Graphic Design. He writes:

“A suitable grid in visual design makes it easy: a) to construct the argument objectively with the means of visual communication; b) to construct the text and illustrative material systematically and logically; c) to organize the text and illustrations in a compact arrangement with its own rhythm; d) to put together the visual material so that it is readily intelligible and structured with a high degree of tension.”

Grids are not just restricted to web and graphic design, almost every profession where any form of design is implemented has a grid system, which professionals use as a guarantee for positive element positioning. It has become almost professionally vital to use grids in all modern design practices.

What Grids Are Available?

Grids are everywhere on the internet, for web designers to use. The king of the grids has been deemed “The 960 Grid”. The 960 Grid has the following structure:

  • Total width 960px.
  • 12 columns Maximum, 60px each wide.
  • Each column has 10px left & right margin. In turn, this makes 20px of gutter space on the edges.
  • Total content area is 940px.

One of the main reasons for the 960 Grid’s popularity with designers is its flexibility. Designers can use a wide range of columns, with the maximum number being 12. The most popular examples are:  9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4 and 10 x 2. The grid has also been used on a wide range of websites, such as Assistly, Drupal, 51bits and Sony Music. To see these sites’ grids in action head over to the official 960 Grid home page.

“The 960 Grid” has always had a very close connection to “The Blueprint Grid”, however they do have a lot of differences. To begin with, “Blueprint” has an in depth set-up for typography, whereas “The 960 Grid” set-up only has minimal typography in place for a guideline rather than a shipped  set-up. Personally I prefer this approach, because both grid systems were released several years ago and the web typography front has changed rapidly, therefore “The 960 Grid” allows for more flexibility when using modern typography in designs.

Another notable feature in “The 960 Grid” framework is the lack of Pull Quotes in the set-up. Nathan Smith (creator of “The 960 Grid”) states:

“Those are things I rarely use, and I consider that to be a bit more design and contextually content oriented than related to page layout and prototyping.”

I’m not entirely sure about the Pull/Push Quote design, and frankly, I get slightly put off by their appearance in websites, because it makes me feel like someone is over compensating. In addition, if the Pull/Push Quote design is produced without much thought or guidance, it can really pull the overall design of a website down.  However, I do understand that it is a popular design element in modern websites, so appreciate Blueprint’s inclusion of a template for the feature.

This means that if I were creating a scoring system for 960 vs Blueprint, it’s currently 1-1 and down to the my last key difference; Vertical Rhythm. Vertical Rhythm is the consistent spacing between sentences and paragraphs in website content, or in other words, line height. Off the bat Nathan Smith again states that, while he feels Vertical Rhythm is an important factor in web design, he believes “it is fragile” and can easily be damaged by a content editor’s placing of an image within the text.

My verdict: I’m going with Nathan Smith purely because, as a developer, I know how many CMSs will allow users to place images of any size into any position within the text, because they have no regard for intricate Vertical Rhythm. There are many work-arounds to deal with this, but I feel that for it to truly work is circumstantial. If you have a project where it will be respected, great, but for the majority of cases I think 960 has a more realistic attitude.

It is my opinion that the 960 Grid framework is the better option, but honestly try them both out and see which one works best for you.

What Other Grids Are Available?

While the 960 Grid is the most popular it doesn’t always mean it’s the best. With the rising popularity of mobile internet browsers and their increasing improvement, designers argue that 960 pixel based frameworks are quickly becoming outdated, because they were never designed with mobile browsing in mind. I agree with this theory, because everything on the web eventually becomes outdated, and I believe that grids now need to be updated, or recreated, to handle mobile browsing.

One of the frontrunners of these new grid systems is the 978 Grid System. The 978 Grid System was coined by Nick La in September 2010 when he questioned the true efficiency of “The 960 Grid” system, especially when it came to designs that used a base font size of 13px or higher. After creating and using the “978 Grid System” on Themify.me, Nick La decided to use it on future production of WordPress templates, along with Darcy Clarke.

Popularity grew and now it is considered one of the most popular alternatives to the traditional 960 Grid system. The 978 Grid System is now run by Brothers Roloff and offers several skeleton frameworks, from mobile all the way up to 1378 width grid systems. I am planning on using the 978 Grid System in future web design myself.

Other Grid Systems & Further Reading

There are loads of grid systems available for use and, as I’ve banged on about previously, it’s all about personal opinion, so if you’re looking for grid systems, there is only one place to go: The Grid System.

For further reading, here is a small list of articles that cover the grid systems I’ve talked about in more depth:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Aminul121

    essential, what i need !!!!

  • www.aibangla.blogspot.com

    highly benefited by this.

  • http://twitter.com/duncanbeattie Duncan Beattie

    Nice intro to grids, I used 960 as a base grid for a while but now I mostly create bespoke fluid grids for each new project. Using any system based on pixels rather than relative units is just far too restrictive especially when designing responsively.
    Also Mark Boultons comments on CSS grids are worth a read http://www.markboulton.co.uk/journal/comments/rethinking-css-grids

    • http://www.climaxmedia.com/ Climax Media

      @twitter-15210758:disqus , thanks for the link. You’ve made some great points regarding a system being fluid versus 960 etc. Though we’re still advocates of a solid 960 layout. At the end of the day it all depends on what the site is for! Great walk through by Callum, nevertheless.

    • http://www.callumeuanhopkins.co.uk/ Callum Hopkins

      Thanks for comment
      Duncan, (spotted your tweet earlier also :) ) you make a very good
      point about the restriction within pixel based grid systems, but I
      think the example on 978′s website does have a good solution for
      pixel based responsive design. However, I do agree that there will
      need to be a big change towards module based grids for a truly
      powerful responsive grid system. Still feel that there’s not enough
      people mastering grid systems first though, including myself!

  • http://www.xldstudios.com/ Erik Bernskiold

    Nice intro post indeed. Sadly though there is no good grid to build a reponsive website on, especially not when you want to have versions for larger displays than 1024px. Looks like the community needs a new framework doesn’t it? Who’s making it?

    • Ahamed Imran

      This fluid called ‘Columnal’ is for 1140px websites but will scale according to the screen size - http://www.columnal.com/.

    • Greg

      Another fluid (down to mobile) system with a larger base width is the appropriately-named 1140. http://cssgrid.net/ It is very lightweight and does not take vertical rhythm into account; but if you use just the typography module of Baseline or if you use something like one of the typography styles from http://type-a-file.com/

    • http://www.callumeuanhopkins.co.uk/ Callum Hopkins

      Hi Erik, thanks for comment.

      I have to disagree though, the 978 grid system does have a framework for screen sizes between 978 and 1218, and between 1218 and 1378 which can work in responsive web design. check out the demo to see them in action: http://978.gs/demo/

      I still agree with you that there needs to be a new grid system which is completely built for responsive web design and development, and im expecting an explosion of solution to this to appear very soon.

  • http://twitter.com/the_new_harley Harley Alexander

    There are several grid systems which I would deem the king over 960. namely Columnal (based on 960, however flexible and responsible) and the 978 grid system. The latter is responsive, but Columnal takes the cake for me. Stopped using 960 months ago in favour of it.

    • http://www.callumeuanhopkins.co.uk/ Callum Hopkins

      Hey Harley,

      Thanks for the comment, I agree. I personally find the 978 grid system to be quite responsive, but have never used the Columnal grid system, I’ll have to take your work on it’s brillance ;) I will definitley look into it though!

  • http://twitter.com/jeff_boulton Jeff Boulton

    Thanks for the post.  I enjoy working with the 960 grid and open source CMS – Joomla with the Gantry and Warp frameworks.

  • Contactsarahjames

    Hi,

    I was doing some online research yesterday and happened to go through your site http://designfestival.com/ as well. I was really amazed by the rich and informative contents that your site provides.

    I am a professional content writer for some of the best web and logo design companies. So I was wondering if I can do something beneficial for you which can make your site much more interesting. It would be great if I can write an article for your site on a topic related to logo designing.

    The article will be 100% original and will always be published in your site. In return It would be great if you can provide me couple of back links for the same niche sites.

    Waiting for your positive response.

    Regards,
    Sarah James
    contactsarahjames@gmail.com

  • http://twitter.com/thinkyourmind Michael Aguilar

    Very nice article. I tend to like to break the rules of the grid to push the limits of the golden section theory, but as you have pointed out sticking to the grid principles will help anyone solve design problems with much more success. Keep the good content coming! Thanks!

    • http://www.callumeuanhopkins.co.uk/ Callum Hopkins

      Hi Michael,

      Thanks for stopping, and thanks for the positive comments, glad to hear you enjoyed the article :)

  • http://www.gowebbaby.com/ Hire Web Designer

    Grate information about grid system and its benefits in web designing techniques….

  • http://pulse.yahoo.com/_ZEUVVAGUDEFV74QT7QIVAQZQKM Dfvd

     ==== Something unexpected surprise ====
    [   http://www.amtata.com  ]
    very good web,believe you will love it.
    exquisite watches shirts,bags,hat and the decorations.We have a good image,

    fashion
    products, favourable price.
    –high quality–reasonable price–fast shipping–don’t miss

  • http://www.purecreationsuk.com web design sheffield

    useful information about grid system.i love it and wait for next

  • http://www.facebook.com/mailsurjeet Surjeet Choudhury

    There is yahoo grid system also. Thsia works fine & we are using it in http://www.driveinside.com

    http://developer.yahoo.com/yui/grids/

    Also see Yahoo grid builder:
    http://developer.yahoo.com/yui/grids/builder/

  • Pingback: Link-urile… anului 2011 « Staicu Ionuţ-Bogdan

  • http://www.fourthdimensionweb.com Myles Kedrowski

    The 960 grid is the way to go, I never start a web design project without that as my base. It makes everything a lot easier to code and makes the site a lot cleaner. Great post!

  • http://www.crearedesign.co.uk James Willis

    Hi Callum, thanks for the post, i found it really informative and easy enough to follow. My designs usually always end up being bespoke / fluid and after reading this I very am tempted to give the grid system a try at least. Thanks again for the informative post Callum.