Join The Forum

Hide Grid Show Grid

“ 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.

• Articles

• • 30 Grid-Based WordPress Themes

  • In this arti­cle we have 30 Word­Press themes have been devel­oped using a pop­u­lar CSS Grid Frame­works such as the 960.gs, Blue­print, YUI2 and The Golden Grid.

  • 23.Aug.2010
• • Design & Build a Grid Based Web Design with CSS

  • Step by step walk­through of the design and build process of a grid based Word­Press theme. From the ini­tial Pho­to­shop con­cept, through development.

  • 23.Aug.2010
• • Long Live the 12-Column Grid

  • When I first crossed the great divide from print to web, one of the ear­li­est things I tried to do was intro­duce a flex­i­ble multi-column grid (you know, like a magazine).

  • 07.May.2010
• View All Articles →

• Tools

• • 960 Grid System Photoshop Action

  • These actions will cre­ate a Pho­to­shop doc­u­ment ideal for lay­ing web­sites out in 12, 10, 8, 6 and 4 columns.

  • 23.Aug.2010
• • iPhone Grid System

  • A 12:8 (480:320) mod­u­lar grid sys­tem for the iPhone, with the unit of 40px and the gut­ter of 5px.

  • 23.Aug.2010
• • Fluid Grid

  • A web grid sys­tem that allows design­ers to use the screen real estate on large mon­i­tors and retain great design on smaller ones.

  • 07.May.2010
• View All Tools →

• Books

• • 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
• • Designing for the Web

  • A Prac­ti­cal Guide to Design­ing for the Web has writ­ten expla­na­tions of the core prin­ci­ples of graphic design in rela­tion to the web.

  • 08.Oct.2009
• • The Way of Typography

  • The book also goes into depth on how to cre­ate grid sys­tems by hand with only pen­cil, straight­edge and compass.

  • 18.Sep.2009
• View All Books →

• Templates

• • The Golden Grid Template

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

  • 02.Mar.2010
• • Photoshop 4 Column Grid

  • A free 4 Col­umn Pho­to­shop grid tem­plate for a 1024×768 screen res­o­lu­tion by Ray Gulick.

  • 08.Jun.2009
• • InDesign 568x792 Grid System (12)

  • By Dario Gal­vagno. Adobe InDe­sign file with a grid sys­tem 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 down­time on the forums. They’re back up now.

  • 07.May.2010
• • Sushi & Robots

  • Beau­ti­fully per­sonal port­fo­lio 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 →

• 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