Layout Grid

This project is a little JavaScript library that uses a canvas tag to draw a grid on your page. The grid helps with alignment issues and vertical rhythm. It only depends on jQuery.

There are some good browser plugins for drawing a grid on your pages, but I wanted something I could integrate into my applications so I could check the grid across all browsers.

The grid is simple, fast, and configurable. All you have to do is call this function when your page loads: layoutGrid.showGrid();

There's also a button in the bottom right corner to move the grid above or below the contents of the page. Move the grid above the contents to see it over sections with opaque backgrounds (like this one) and move it back below the content so you can interact with your page.

Customizing the grid

You can change the color of the grid in the grid.css file. Like this:

div.gridLayoutColor {
    background-color: rgba(225, 225, 225, 0.3);
}

div.gridLayoutColColor {
    background-color: rgba(0, 255, 255, 0.8);
}

div.gridLayoutRowColor {
    background-color: rgba(0, 255, 255, 0.8);
}

And you can change the size of the grid in the same grid.css file like this:

div.gridLayoutRow {
    height: 28px;
}

div.gridLayoutColumn {
    width: 28px;
    padding-right: 0px;
}

The grid also supports highlight columns and rows. Those are the cyan lines that call attention to specific lines in your grid. Add highlights in the code at the top of your page like this:

Array.prototype.push.apply(layoutGrid.highlightRows, [2, 4]);
Array.prototype.push.apply(layoutGrid.highlightCols, [5, 7]);

Take the code, copy it into your project, customize your grid, and make something beautiful.