The Grid System

This page demonstrates the use of CSS3 Grid Align to layout HTML5 content according following grid defined in CSS. It reproduces the layout of the tGrid System homepage.
This demonstration uses the CSS3 Grid Alignment to lay out this HTML5 version of the the Grid System home page according to a grid.

The Grid System

The ultimate resource in grid systems

“ 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

Articles

Musings on the Relationship Between Grids and Guides

An article that takes a look at the relationship between the grid and the use of guides.

Regulatory Policy Newsletter

An article outlin­ng the redesign of ICMA’s quarterly publication and its grid.

Grids: Recondite Structures of Design

Grids, along with visual hierarchy, typography, color theory, rhythm, etc., are the basic foundations of design and yet they are widely ignored by the industry.

Tools

GuideGuide

A columns, rows and mid­points panel for Photoshop CS4 & CS5.

Modular Grid Pattern

A web app and Photoshop extension that aids in creating modular grid systems.

Six column Sandbox

A CSS grid framework that’s based on a baseline of 1.4x the paragraph text-size, 160px columns, with gutters of 20px.

Books

Ordering Disorder: Grid Principles for Web Design

Ordering Disorder is a book by Khoi Vinh that delivers a definitive take on grids and the Web and provides both the big ideas and techniques of grid-based design

Universal Principles of Design

Universal Principles of Design is the first comprehensive, cross-disciplinary encyclopedia of design.

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

Templates

960px Grid Templates

A selection of 960 pixel-wide uniform grid templates ranging from 3-columns to 16-columns, for both Adobe Photoshop and Fireworks.

The Golden Grid Template

A PSD template based on the CSS framework The Golden Grid by Vladimir Carrer.

Photoshop 4 Column Grid

A free 4 Column Photoshop grid template for a 1024×768 screen resolution by Ray Gulick.

Blog

The Columnist

A grid based WordPress theme that features a newspaper column layout and neat typographic hierarchy.

Grid-A-Licious 2.0

A beautiful grid-based theme for WordPress.

Bon Graf Pads

A range of beautifully crafted grid layout pads printed on acid free 100gsm uncoated paper and made in Australia.

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
This demo uses three files: one HTML page written using semantic HTLM5 markup, one stylesheet for styling the content (typography and colors) and another stylesheet for grid layout.