#grid is a tiny tool, built with JavaScript & CSS, which inserts a layout grid into web pages & enables you to detect alignment issues in place.

It is activated with a hotkey (Alt+g) & can toggle between displaying the grid in the foreground or background.

HashGrid

By default, #grid comes with a 980-pixel-wide background image to provide the vertical grid lines (a 940-pixel-wide content area with 20px gutters).  But, when working on different grids, you can create a new image for your guides.

Usage is very straightforward, just include the JavaScript file & CSS to your project.

WebResourcesDepot Feed