The Grid System

Articles
- Long Live the 12-Column Grid
- When I first crossed the great divide from print to web, one of the earliest things I tried to do was introduce a flexible multi-column grid (you know, like a magazine).
- 07.May.2010
- Web Design with Grids
- People, including myself are building sites using grids. Now it seems to me that when you’re designing in a browser you want to be able to follow the grid’s principals all the way through the process.
- 07.May.2010
- Applying Mathematics to Web Design
- Because of its beautiful nature, mathematics has been a part of art and architectural design for ages. But it has not been exploited much for website design.
- 02.Mar.2010
View All Articles →

Tools
- Fluid Grid
- A web grid system that allows designers to use the screen real estate on large monitors and retain great design on smaller ones.
- 07.May.2010
- Griddy
- A small JQuery plugin thats creates a simple, customizable overlay on top of any element.
- 07.May.2010
- #grid
- A tool that inserts a layout grid in web pages, allows you to hold it in place, and toggle between displaying it in the foreground or background.
- 02.Mar.2010
View All Tools →

Books
- Universal Principles of Design
- Universal Principles of Design is the first comprehensive, cross-disciplinary encyclopedia of design.
- 04.Nov.2009
- Designing for the Web
- A Practical Guide to Designing for the Web has written explanations of the core principles of graphic design in relation to the web.
- 08.Oct.2009
- The Way of Typography
- The book also goes into depth on how to create grid systems by hand with only pencil, straightedge and compass.
- 18.Sep.2009
View All Books →

Templates
- The Golden Grid Template
- A PSD template based on the CSS framework The Golden Grid by Vladimir Carrer.
- 02.Mar.2010
- Photoshop 4 Column Grid
- A free 4 Column Photoshop grid template for a 1024×768 screen resolution by Ray Gulick.
- 08.Jun.2009
- InDesign 568x792 Grid System (12)
- By Dario Galvagno. Adobe InDesign file with a grid system for a 568pts x 792pts page that is divided into 12 columns and rows using the Golden Ratio. Includes a 12pt baseline grid.
- 16.Apr.2009
View All Templates →

Blog
- Forum is back up!
- Sorry for the downtime on the forums. They’re back up now.
- 07.May.2010
- Sushi & Robots
- Beautifully personal portfolio by Jina Bolton that reveals the site grid and baseline grid.
- 07.May.2010
- Bisgrafic
- Lovely grid site design by Barcelona based Bisgrafic.
- 07.May.2010
View All Blog Posts →

About

Made popular by the International Typographic Style movement and pioneered by legends like Josef Müller-Brockmann and Wim Crouwel, the grid is the foundation of any solid design. The Grid System is an ever-growing resource where graphic designers can learn about grid systems, the golden ratio and baseline grids.

Created by Antonio Carusone, graphic designer and author of the design and typography blog AisleOne. Special thanks to Duane King for his help and wisdom.

If you want to say hi or for general inquiries, send an email to: hello@thegridsystem.org

Have an article, tool, template or news you want to submit? Send an email to: submit@thegridsystem.org

Want to stay updated with the most recent content? Subscribe below via email for daily updates or to the RSS feed.