Jul 28, 2010
For designers: How to use a grid system
As a front-end developer for multiple designers sometimes I’m given designs and layouts for sites that follow a grid system, like 960.gs.
Sometimes I debate with myself whether they’re using a grid system because they are aware of the advantages a system like that brings, or because it’s a trend. But either way, since some of them don’t understand how a grid system works, I thought I’d write a tutorial on simple guidelines they can follow, to make their front-end developer’s life easier.
Columns and Gutters
Every grid system consists of two concepts: columns and gutters.
The columns are represented above by the pink areas, and gutters are the spaces between them.
In Photoshop, if you design something that only occupies one pink area, it will be the size of the pink area alone. If you choose to occupy two columns, then it will be the width of two columns + the width of 1 gutter. If it occupies 3 columns, it will be the width of 3 columns and 2 gutters, and so on.
Unlike what some people believe, the gutters are not just a fixed value on one of the sides of each column, but instead, they consist of 2 values, on both sites. Let’s take a closer look.
This image consists of two columns and, as you can see, it clearly shows how the gutters are configured in the grid system. The width of the gutter, by default (on the system with 12 columns) is 20 pixels. That means, on the left and right side of each column, there is a margin of 10 pixels.
If you want to occupy any of those 10 pixels, belonging to the gutter, we have to make a rule that resizes the element and removes the margin from either side. Unless this element is used a lot, we just wasted a lot of code, and it’s untested, might break other elements in the grid system and (usually) it’s not used in anything else.
Everything, and anything you design, by default, should always be inside of the pink areas above, and any gutters in between them.
It saddens me, and probably a few other front-end developers elsewhere, when we receive a design from someone obviously trying to improve their work, by using the grid system, but fail to size their elements correctly, forcing us to code the site as if it had no grid system at all, thus eliminating all the benefits of having it.
If your design elements constantly move into the area where the gutters lie, that renders the grid system useless for us. Any code re-usability is wasted, and we have to write something custom from scratch. This means that when we implement the design, the chances are higher there will be more bugs and problems to fix, because the default 960 grid system, is already cross-browser tested.
Why do designers do this? How can we avoid it?
Well, I think it’s quite simple to solve. Most designers simply stick to the default grid system layout, which has 12 columns. Although those sizes are fine for a common website, sometimes they limit the creativity if they want to add something different. When you download the PSD package from the 960.gs website, it includes a 24 column layout, which is much more versatile.
If that doesn’t work, just make a new one! There is a Photoshop script you can download here that allows to create custom 960 Grid Systems on the fly. You can change the number of columns, their width, and various other things.
The better you follow a grid system, the more concise it will be, the less bugs/problems it will have when it’s implemented. I’m not saying that every site should follow a grid, you shouldn’t limit your creativity. You should understand the advantages of using a grid system before jumping on to it.
All designers should remember that the better they understand their medium, the better their designs will be.
