The awards of design, creativity and innovation on the internet

Grid Based Web Design Resources

As a complement to our prior post "30 Grid-Based Websites", we've made a selection of indispensable resources like layout frameworks, tutorials, books, templates and useful tools that can help you understand and implement grid based design in your projects.
Let's start with a little history. Many of you know who Massimo Vignelli is, a known designer with a solid modernist influence who developed his career in numerous areas of design. In 1977, he designed the Unigrid System for the National Park Service. The module grid system allowed the creation of brochures in ten basic formats keeping a consistent, recognizable structure. Who knew that 30 years later his work would be the inspiration of a discipline that he couldn't even dream of at that time. In 2009, Vignelli himself published a free e-book called "The Vignelli Canon" with the sole purpose of sharing his knowledge with the new generations of designers.

Tools & Online Layouts Generators

The 892 unique ways to partition a 3 x 4 grid

The 3 × 4 grid poster is a computation-based design. It reveals the 892 unique ways to partition a 3 x 4 grid into unit rectangles using an algorithm designed to generate all possible variations.
http://www.3x4grid.com/poster.html

Frameworks

960grid

The 960 grid is a classic among CSS frameworks, a very useful tool based on a width of 960px with a large number of resources to integrate the design in the layout.
http://960.gs/

YAML

This is not just another multicolum layout. Yaml is a fluid and responsive grid system framework that gathers the best characteristics of the most well-known grid based systems together with new techniques applied to responsive design.
http://www.yaml.de/

The Golden Grid

A grid system for responsive web design. Includes folding columns, elastic gutters, a zoomable baseline grid, and a delightful grid overlay script.
http://goldengridsystem.com/

This is not a Framework this is a non-fluid grid for adaptive web design; adapts column by column, not pixel by pixel.Use media queries to adapt your design as more columns become available.
http://framelessgrid.com/

Columnal

A responsive CSS grid system helping desktop and mobile browsers play nicely together.Columnal supports mobile layout through the use of media queries.
http://www.columnal.com/

1140 CSS Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and uses media queries to serve up a mobile version.
http://cssgrid.net/