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

• • Applying Mathematics to Web Design

  • Because of its beau­ti­ful nature, mathematics has been a part of art and archi­tec­tural design for ages. But it has not been exploited much for website design.

  • 02.Mar.2010
• • Mystery of Golden Ratio Explained

  • The Egyp­tians sup­pos­edly used it to guide the con­struc­tion the Pyra­mids. The archi­tec­ture of ancient Athens is thought to have been based on it.

  • 02.Mar.2010
• • The Golden Proportion

  • The golden sec­tion– a pre­cise way of divid­ing a line, music or any­thing else-is showed up early in mathematics.

  • 06.Jan.2010
• View All Articles →

• Tools

• • #grid

  • A tool that inserts a lay­out grid in web pages, allows you to hold it in place, and tog­gle between dis­play­ing it in the fore­ground or background.

  • 02.Mar.2010
• • Fluid 960 Grid System

  • A jQuery based fluid grid sys­tem tem­plate based on Nathan Smith’s 960 Grid Sys­tem. Allows mul­ti­ple lay­outs includ­ing 12 or 16 fluid columns and 12 or 16 fixed columns.

  • 06.Jan.2010
• • Masonry

  • Masonry is a lay­out plu­gin for jQuery that arranges ele­ments ver­ti­cally then hor­i­zon­tally accord­ing to a grid.

  • 06.Jan.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

• • Grid Based Designs

  • A gallery show­cas­ing some of the world’s best web­sites designed based on a grid.

  • 02.Mar.2010
• • Buy Slammer = Help Haiti

  • The grid-generating app Slam­mer is part of the Indie+Relief ini­tia­tive. Buy it and all pro­ceeds from today (01/20) will be donated to Haiti.

  • 20.Jan.2010
• • Eternal Network

  • Lovely min­i­mal grid based site design that’s rem­i­nis­cent of old computer paper.

  • 06.Jan.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