In order to draw the grid lines we’re going to use the css extensions, “-moz-element” and “-webkit-canvas”.  These extensions allow us to use a canvas as the background image of any element on the page.  The canvas allows us to draw anything we want, in this case, grid lines.

NOTE: this example only works in Firefox Chrome and Safari.

The easiest way to draw grid lines is to draw 2 lines and set the background to repeat.  What do I mean?

If you take this image of 2 lines and repeat it you get a grid.

If the top and left sides not being filled are a problem then you can add a border-top and border-left to the element to compensate.  Another solution is to add an offset to the background css of the grid width -1.  So if the grid is 32px by 32px you can add:

[css]background-position: -31px -31px;[/css]

This will leave the right and bottom sides open however.  The most sensible for a graph or chart would

[css]background-position: 0px -31px;[/css]

Assuming that you have your axes on the left and bottom.

Now to the code!