“ The grid system is an aid, not a guarantee.
It permits a number of possible uses and each
designer can look for a solution appropriate to his
personal style. But one must learn how to use the
grid; it is an art that requires practice. ”
Josef Müller-Brockmann

The ultimate resource
in grid systems.

Hide Grid Show Grid

• Articles

• • The 960 Grid System Made Easy

  • This arti­cle is for web design­ers and front-end web devel­op­ers who are inter­ested in grid-based lay­out sys­tems but are at a loss on how to decipher them.

  • 04.Mar.2012
• • How You Make A Grid

  • A PDF writ­ten by Andrew Maher to help you design grids and to give you the resources to delve fur­ther into the grid world.

  • 04.Mar.2012
• • Rethinking CSS Grids

  • Mark Boul­ton pulls together some of his thoughts and con­cerns regard­ing CSS grids and how they could (or, maybe, should) be created.

  • 04.Mar.2012
• View All Articles →

• Tools

• • Golden Grid System

  • A fold­ing grid for responsive design.

  • 04.Mar.2012
• • Fluid Baseline Grid System

  • An HTML5 & CSS3 devel­op­ment kit that pro­vides a solid foun­da­tion to quickly design web­sites with ease.

  • 04.Mar.2012
• • The Square Grid

  • A sim­ple CSS frame­work for design­ers and devel­op­ers, based on 35 equal-width columns.

  • 04.Mar.2012
• View All Tools →

• Books

• • An Initiation in Typography

  • In this fas­ci­nat­ing ini­ti­a­tion into visual design and typog­ra­phy. The first chap­ter deals with pro­por­tions: grid sys­tems and typo­graph­i­cal measurements.

  • 04.Mar.2012
• • Ordering Disorder: Grid Principles for Web Design

  • Order­ing Dis­or­der is a book by Khoi Vinh that deliv­ers a defin­i­tive take on grids and the Web and pro­vides both the big ideas and tech­niques of grid-based design.

  • 11.Nov.2010
• • Universal Principles of Design

  • Uni­ver­sal Prin­ci­ples of Design is the first com­pre­hen­sive, cross-disciplinary ency­clo­pe­dia of design.

  • 04.Nov.2009
• View All Books →

• Templates

• • Photoshop Grid Templates

  • A small col­lec­tion of grid tem­plates for var­i­ous devices and com­mon design scenarios.

  • 04.Mar.2012
• • 960px Grid Templates

  • A selec­tion of 960 pixel-wide uni­form grid tem­plates rang­ing from 3-columns to 16-columns, for both Adobe Pho­to­shop and Fireworks.

  • 11.Nov.2010
• • The Golden Grid Template

  • A PSD tem­plate based on the CSS frame­work The Golden Grid by Vladimir Carrer.

  • 02.Mar.2010
• View All Templates →

• Blog

• • Khoi Vinh — On the grid

  • Web and inter­ac­tive designer Khoi Vinh speaks about his process and using the grid.

  • 04.Mar.2012
• • The Columnist

  • A grid based Word­Press theme that fea­tures a news­pa­per col­umn lay­out and neat typo­graphic hierarchy..

  • 06.Feb.2011
• • Grid-A-Licious 2.0

  • A beau­ti­ful grid based theme for WordPress.

  • 06.Feb.2011
• View All Blog Posts →

• 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