I recently came across Khoi Vinh’s post about using a background image of a grid to help you lay out your page as you are building it [via Garrett Dimon].
Simply put, you apply the grid to the body of your page as a background image so that it displays behind your site. Thus you can use it to precisely line up your layout.
This seems like such a useful technique, especially when it comes to resolving cross-browser differences, that I’m surprised I haven’t seen it referenced before (maybe I just don’t move in the right circles).
As Khoi says himself:
Coming up with this little trick left me very pleased with myself, as it allowed me to produce easily the most precise layouts of my career.
I thought it might be useful expand upon this idea and create a generic grid template that one could use with any layout, and so I came up with the example below:
I haven’t thoroughly tested it out yet in the form of applying it to real-world design projects, so if there are some improvements you’d like to see just let me know.
Or, you can add them yourself; I’ve included the Fireworks source file (old school, I know) for you to customize as you see fit.
In a similar vein, you should also check out Greg Storey’s ruler image technique, which works well in conjunction with the grid image.