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).

Join the conversation


  1. Seems to be working a bit weird here at home. Screen resolution of 1280×720, browser full screen. Default LucidGrid settings put the grid right out of the window (also, the grid doesn’t extend to the bottom of the page, only the viewport so I can’t see it when I scroll down).
    Running on Firefox 3.0.5 / Linux.

  2. Great utility. I did have the same problem as dark liquid above but I simply changed’absolute’ to’fixed’ and the grid stays on top even when scrolling the page.

Leave a comment

Leave a Reply to Jamie Cancel reply

Your email address will not be published. Required fields are marked *