all things webby

Site Grid System


implementing a grid systemImplementing a grid system into your existing site

Way back last year I was asked to implement a grid system by our UX guy into our many sites at Johnston Press. The reason for this was to aid in the rollout of many more verticals that were to fit into our current page layout over the next year.

Our current sites had a content width of 986px which did not lend it’s self to be divisible by any small useable grid size.

Working closely with our new UX (User Experience) guy he came up with a thought behind this. Having used grid systems many times before for other clients it was quickly aparent that expandability was so much easier and friendly when using a grid system. If you plan on having a fairly static site that will probably not need any major overhall / functionality added in at a later date then this may not pose any major problems. That aside, using a grid system can add to the feel and useability of any design.

showing padding of 8px

Showing the 8px padding - the 344px width is also divisible by 8px.

Trawling through the web there are plenty of tutorials online suggesting the best grid system, 960 or 1140 etc. Ours was simple, it had to be because there were so many potential projects that could go into this design some of which had API’s from 3rd parties that until the project had been agreed it was difficult to know what parts would be available and most importantly if that would fit into a solidly defined grid system. In the end we came up with a grid that essentially divided into 8px. The main content area was increased from 986px to 992px then the padding and margins that were ranging from 6px to 16px (and all in between) were changed to 8px and mutliples of, tidying up all the random edges.

The result of this not only the gain in 6px to the overall content width from 986px to 992px (but still easily viewed on most available screen resolutions today) but all the random margins and paddings that exceeded this were brought down to the 8px grid size giving a much larger and well defined column size for the major parts of our content. Untill then the right hand column (generally regarded for use with secondary content and some advertising) was taking up more of a page premiuim – now we could get more core content into our sites before the fold of the page and give ourselves greater scope for newer projects to fit into.

This relativley simple approach was easy and quick to implement taking less than a day to code for the main content holding areas and the same again for a complete regression test of the sites. The rest of the sites smaller sections will eventually all follow inline and become part of the grid system going forward – a task anyone should consider if in a similar situation.

Any thought’s on this article, have you undergone any similar projects and do you see the benefit of a stable grid design? Comment below if you would like to share your thoughts.


  1. 748332 683803I certainly enjoyed the method that you explore your experience and perception of the area of interest 828318

  2. I simply want to tell you that I am just newbie to blogging and absolutely enjoyed this blog site. Probably I’m likely to bookmark your blog . You certainly have incredible well written articles. Thank you for sharing your website page.

  3. I just want to say I am new to blogging and site-building and seriously savored your blog. Very likely I’m want to bookmark your site . You absolutely come with remarkable article content. Thanks for sharing your blog site.

  4. As a Newbie, I am permanently searching online for articles that can aid me. Thank you

  5. Pingback: Yikes

  6. I discovered your blog from look on google and look at some your earlier posts.Personally i think that you’ve got great insights!Continue to keep the good work. I just sync my Feed to my MSN Newsreader.

  7. work hard.

    • I am often to blogging and i really appreciate your content. The article has actually peaks my interest. I’m going to bookmark your website and maintain checking for brand spanking new information.

  8. looking forward to another great article. good luck to the author! all the best!

    • Definitely believe that which you satetd. Your favorite reason seemed to be on the internet the simplest thing to be aware of. I say to you, I definitely get annoyed while people think about worries that they plainly do not know about. You managed to hit the nail upon the top and also defined out the whole thing without having side-effects , people can take a signal. Will probably be back to get more. Thanks.

    • Whoever edits and pbulisehs these articles really knows what they’re doing.

  9. hi, great post. i really admire your work.

    • Thank you for your whole work on this web page. My mother ralely likes going through investigation and it’s easy to understand why. Most people learn all concerning the compelling tactic you give worthwhile items via the web blog and therefore increase response from other individuals about this situation then our favorite princess is always studying a lot of things. Take advantage of the rest of the year. You’re the one performing a dazzling job.

Leave a Reply

Required fields are marked *.


* Copy This Password *

* Type Or Paste Password Here *