Seven Smooth Steps to Superb Grids

One of the new trends among web designers has to be grid design. While grid design is a simple concept, there are now so many tools and ways of doing it that it might get confusing for newcomers. So here is my way of doing things, i.e. how I would explain grid design to someone who’s never heard about it.

My aim here is not to be exhaustive and shower you with links and fancy tools, actually it’s quite the opposite. I’ll give a few links for each section, but if you’re short on time, just click on the first one !

But first, do you have the necessary tools ? You’ll need

Your favorite design software, preferably Photoshop with GridMaker
A code or WYSIWYG editor like Dreamweaver
The Firebug extension for firefox, or Xray if you use IE
Optional: A CSS framework, for example the Blueprint CSS library

All set ? let’s go !

Step one: understand grids

This one is easy enough. No matter if you like grids or not, if you organize content on a page you’re already using one without even knowing it. The only problem is that your implicit “grid” might not be regularly spaced, and that creates imbalances in your design. To avoid these imbalances, your best bet is to plan out a grid as early as possible in the design process.

Keep in mind that a grid usually regulates horizontal spacing (i.e. the space between columns) but that vertical spacing (the space between lines) can be just as important. More on that later.

examples of grid-based sites

Step two: define your grid

When starting out, I advise you use a 12 (or 24) columns grid, as 12 is a very flexible number. Some people also like 14 columns. Then you need to define total page width (ideally something between 700 and 960 px), padding between each columns (or “gutters”), and padding inside each columns. Inside padding is not technically part of the grid, but it’s better to include it in your calculations early on .

For now let’s start out with a simple 960px wide layout, with 12 columns with lots of space between them and a little space inside.

Step three: calculate your grid

It’s easy enough. Total width (960px) divided by number of columns (12) gives us the column+margin width (80px). Now we decide how much space we want between each column (let’s say 20px) and we have the individual column width (80px-20px=60px). The good news is that tools like the Blueprint CSS Grid Generator do all of the math for you.

We haven’t talked about horizontal spacing yet. This is because it’s very hard to tell exactly how much vertical space content (which might be dynamic) will take up on a web page. However, we can define a baseline, or a basic unit of vertical space. The most common way to define it is to take your text’s line-height (this will ensure all the text falls neatly on the horizontal grid). A common baseline is 18px, which is 1.5 times 12px, the default font size. If you want to have bigger text with more spacing, you might try a 14px font size with a 28px baseline.

3 automatic grid calculators

Step four: start designing

Now is when things get fun. Download the Gridmaker plugin for photoshop, install it, pop in the values we just decided on (for the horizontal grid, you can use your baseline or multiples of it), and start designing ! Don’t worry if you realize you made a mistake with your grid. Starting over a few times is part of the job.
And don’t forget you can always refer to existing grid designs for inspiration.

Step five: choose a css framework

Why reinvent the wheel ? You don’t need to manually specify widths and float for each of your columns. I advise using Blueprint CSS or YUI Grids for example. My personal favorite is Blueprint because it includes lots of other cool stuff. The downside is that you need some time to study it and learn to deactivate the stuff you don’t want.

3 css frameworks that support grid systems

Step six: put everything together

This is the hardest part. To help you with it, you can use Syncotype to check that everything fits on the baseline, or Grid Layouts to do the same for the vertical grid.

2 time-saving tools to help you code your layout

Step seven: admire your work

See how everyting seems clean and well layed out ? That’s the magic of grids !

3 links to learn more about grids