Articles
-
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
-
Mystery of Golden Ratio Explained
The Egyptians supposedly used it to guide the construction the Pyramids. The architecture of ancient Athens is thought to have been based on it.
- 02.Mar.2010
-
The Golden Proportion
The golden section– a precise way of dividing a line, music or anything else-is showed up early in mathematics.
- 06.Jan.2010
Tools
-
#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
-
Fluid 960 Grid System
A jQuery based fluid grid system template based on Nathan Smith’s 960 Grid System. Allows multiple layouts including 12 or 16 fluid columns and 12 or 16 fixed columns.
- 06.Jan.2010
-
Masonry
Masonry is a layout plugin for jQuery that arranges elements vertically then horizontally according to a grid.
- 06.Jan.2010
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
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
Blog
-
Grid Based Designs
A gallery showcasing some of the world’s best websites designed based on a grid.
- 02.Mar.2010
-
Buy Slammer = Help Haiti
The grid-generating app Slammer is part of the Indie+Relief initiative. Buy it and all proceeds from today (01/20) will be donated to Haiti.
- 20.Jan.2010
-
Eternal Network
Lovely minimal grid based site design that’s reminiscent of old computer paper.
- 06.Jan.2010
Inspiration
- Ace Jet 170
- AisleOne
- Athletics
- BBDK
- Blanka
- Build
- Corporate Risk Watch
- Counter Print
- David Airey
- Design Assembly
- Dirty Mouse
- Experimental Jetset
- Form Fifty Five
- Grafik Magazine
- Grain Edit
- Graphic Hug
- I Love Typography
- Lamosca
- Mark Boulton
- Minimal Sites
- Monocle
- Neubau
- NewWork
- OK-RM
- Original Linkage
- Robin Uleman
- SampsonMay
- Schmid Today
- September Industry
- Soulellis
- Subtraction
- Swiss Legacy
- The International Office
- Thinking for a Living
- This Studio
- Toko
- Typographic Posters
- Visuelle
- Xavier Encinas
- Year of the Sheep
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
Subscribe
Want to stay updated with the most recent content? Subscribe below via email for daily updates or to the RSS feed.
Archives
Goodies
Colophon
- Made on a Mac
- Set in Helvetica
- Themed in Futurosity
- Hosted by Media Temple
- Powered by Wordpress

















