Grid for aligning HTML elements

When it comes to layout markup and CSS I use FireBug and the Webdeveloper Toolbar for FireFox constantly.

With HTML block alignment a useful tool is the ruler under the Miscellaneous tab in the Webdev Toolbar.
The problem with it is this, every page refresh you need to add it back.

This is a pain when aligning a lot of different size elements, like forms for example.
So I made a simple tool for it, a graphic that is repeated with CSS over the area you are working in or the entire body.
A tiny bit of CSS and HTML goes a long way.

It is open source and available with an example on GitHub Grid Layout Overlay

Add the div to the area you want the grid to overlay.

Drop the image in an accessible path.

Add the CSS

Make sure to adjust the path to point to the image location url(‘../img/100grid.png’)

Then you should end up with a grid over your layout like this simple example.

I will be posting YouTube entries on this also.