Over the weekend I had the opportunity to design a 4 column site for a mockup. One of the first hurdles in a 4 column site is to calculate the grid dimensions with gutters. Since the size was fixed to a max of 780px I knew I had to work within that. So I set about putting guides every 195pixels then new guides on either side of them for gutters. But then I decided to give a little outter margin to the 4 columns so now my column size shrunk down to 186px with 5px inner gutters and 10px outer gutters. If only I had a tool to make these calculations for me.

So surfing monday morning I found Matthew Pennell’s Grid Calculator . He even has a plugin for Photoshop CS2 to draw the grid. Be sure to follow the links in his blog to Mark Boulton’s grid experiments.

For the best explanation of grid use in web design be sure to get a copy of Andy Clark’s Transcending CSS: The Fine Art of Web Design (Voices That Matter). It will even take you into CSS3 grid techniques not yet available.

This entry was posted on Monday, May 7th, 2007 at 7:32 am and is filed under Products. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.