Grid design resources

Designing with the help of grids is so important I wanted to leave you with a few of my favorite resources regarding grid-based design.

Design by Grid

Design by Grid is a fantastic collection of articles and tutorials designed to promote the use of grids in web design.

The Grid System

Perhaps my favorite collection of articles, links, templates, and books on grid-based design. Invaluable.

The Elements of Typographic Style Applied to the Web

While not strictly grid-focused, this web adaptation of Robert Bringhurst’s book The Elements of Typographic Style is a fantastic resource for learning how typography should translate to the screen, and how to calculate and measure text.

Golden Ratio Calculator

Fantastic tool for calculating the widths and relationships of elements based on the Golden Mean.

960 Grid System

While I'm not advocating using the 960 grid system, this site offers plenty of how-to to go along with its popular grid system. Explore the site, read through the documentation, and find out how the system works. Ideal for deciding if a grid-based system is right for you, or for learning how to build your own.

Grid Based

Nice gallery of grid-based sites that you can learn from and be inspired by.

Hash Grid

A really nice, compact javascript-based grid that you can include in your files. It allows you to turn on the grid at anytime to check how your design elements fit within your targeted grid.

960 Gridder

Another useful grid overlay tool for designing your sites. Can be activated as a bookmarklet or injected into your sites