LucidGrid – a bookmarklet for working with grid based layouts

I’m pleased to give you LucidGrid, a super useful bookmarklet for working with grid based layouts…

I have been working on a few grid based layouts of late and consistently find myself sitting with a calculator tapping out the various dimensions. I was surprised to find that there weren’t any simple bookmarklets for this so I wrote one.

LucidGrid allows you to supply a width, the number of columns you need and the gutter size and then overlays a grid on the current page. You may disable the grid by clicking the bookmarklet again or by clicking exit. If you choose to apply the grid, the preference dialog will minimise to the top right of the window.

Grid changes happen in realtime so it is easy to play with different settings.

Simply drag the link below to your bookmarks bar in your browser or click it to try it out first:


Enjoy… (currently tested with Safari 3.2.1 and Firefox 3.0.5).