With projects like 960.gs becoming prevalent, and grid design becoming more and more prominent in the eyes of high end designers, I spent a little time to work out a formula to generate a single columns width based upon three things.

1. The Total Width of the Page
2. The Number of Columns
3. The Padding Between Columns

The formula is actually fairly simple, as you can see. It simply takes the page width, and subtracts the number of columns you desire and multiplies it by the amount of padding you specify. Then divide that by the number of columns again. Boom. You have your column width.

Not to leave something this interesting without fully tapping out my mental resources on it, I decided to write an application that would take your page width and padding, and then generate a list of possible grid solutions. You can then simply click on a grid solution, and tada! You’ve got some CSS that will help you start forming flexible grids of any width! Check out the grid generator at http://www.zacharyspencer.com/tools/grid_generator/

—Zach

This entry was posted on Wednesday, April 23rd, 2008 at 6:39 pm and is filed under Cool Stuff, Design. 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.