Designers love grids – they simplify layout, create clean, readable blocks of text and can even make your CSS a bit more manageable. But few of us want to go through the labor-intensive process of creating them. CSS frameworks that incorporate grids started to pop up everywhere several years ago, but sometimes a full CSS framework is overkill when all you want is a basic grid structure.
Now you can have your grid and eat it too, thanks to Gridulator, which makes creating a grid dead simple. Gridulator was built by developer David Sleight, and its slick, simple design will create a custom grid for your site in no time. Just plug in the width of your page design and Gridulator will spit out all the possible grids that have nice round numbers, saving you the mathematical work of creating your own.
To help your figure out your grid's column width and gutter spacing, Gridulator uses a little HTML5 Canvas magic to offer inline previews. When you've got everything tweaked to your liking, Gridulator can spit out full-size PNGs that are ready to be dropped into your CSS, Photoshop comps or wherever else you do your mockup work.
Of course Gridulator works best for pixel-based grids. However, while it won't do all the math for you, it isn't too hard to convert pixel dimensions to ems an create a fluid grid.
Gridulator is not the first tool of it's kind (see Grid Designer for another take on the idea), but it is one of the simplest and easiest to use. If you love grids, but you're tired of doing the math yourself, check it out.
See Also:
