Grid Based Design Toolbox

My favorite place to go for Grid based design information is The Grid System. It’s a ‘must bookmark’ in my opinion. Don’t forget to check out the new Grid System Forum too. I’m a minimalist designer so I believe the grid is one of the most important elements of web design. There are many articles and resources on the web, I’ve chosen to pick through them all and compile my best resources/tools all in one fell swoop. Keep in mind, there are plenty of list posts out there but these are my ‘go to’ grid resources.

After all – why would you want to search for it if I’ve done it for you?



  1. Grid Maker
  3. Fluid 960 Grid System
  4. The Golden Grid
  5. Grid Calculator
  6. Gridmaker for Photoshop CS4
  7. Baseline Rhythm Calculator
  8. Typogridphy
  9. Gridr Buildrrr
  10. Grid Layouts
  11. GridFox
  12. Illustrator 974px Grid System
  13. Sharing the Grid
  14. 960px Photoshop Grid Template
  15. Grid Bookmarklet
  16. Layout Grid Bookmarklet
  17. JQuery Grid Plugin


  1. Design By Grid Showcase
  2. Grid and Column Designs

How To

  1. Grid Design Basics – Grids for web page layouts
  2. Grid-Based Design 101
  3. Grid-based Layout
  4. Designing Grid Systems For Flash
  5. Design A Fresh Blog Theme On The 960 Grid
  6. Grid-Based Design: Six Creative Column Techniques
  7. Typographic Grid
  8. GridControl: A Grid Overlay System for Design Development
  9. Prototyping With The Grid 960 CSS Framework
  10. Seven Smooth Steps to Superb Grids
  11. Designing with grids in Photoshop

Wordpress Themes

  1. Grid-A-Licious
  2. Grid Focus
  3. Modern Clix

Noteworthy Articles

Mark Boulton

  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid
  6. Why use a grid?
  7. Grids are good – Design – SXSW
  8. Feeling your way around grids


  1. Grids in Both Directions

A List Apart

  1. Thinking Outside the Grid
  2. Setting Type on the Web to a Baseline Grid
  3. Fluid Grids


  1. Grid Computing… and Design

.NET Magazine

  1. Designing with grids

Cameron Moll

  1. Gridding the 960

Divito Design

  1. 960 CSS Framework – Learn the Basics

Smashing Magazine

  1. Applying Divine Proportion To Your Web Designs
  2. Designing With Grid-Based Approach

Design View

  1. Quiet Structure

Aisle One

  1. Grids In The Real World

If you liked this article, please help spread the news on the following sites:

  • Bump It
  • Blend It
  • Bookmark on Delicious
  • Stumble It
  • Float This
  • Reddit This
  • Share on FriendFeed
  • Clip to Evernote