Layout Grid Basics
"A grid consists of a distinct set of alignment-based relationships that act as guides for distributing elements across a format."
Leary
Benefits of working with a grid:
- clarity
- efficiency
- continuity, consistency, coherence
- organization for text and images
- better legibility (if done right)
- can lead to better hierarchy of information
The Column Grid
Content organized/placed in vertical segments of equal widths (or combined/multiple widths)
Examples on the web:
http://www.studioblue.us
http://lillianflorsheim.net/gallery/small
https://www.radutny.com/index.php/news/view/170919-between-states-exhibition
http://chicagodesignconference.com
http://driehausmuseum.org
The Modular Grid
Content organized/placed in vertical and horizontal segments of equal widths (or combined/multiple widths)
Examples on the web:
https://www.radutny.com/index.php/work
http://lillianflorsheim.net/categories/shapes
http://davisinteriordesign.com/index.php/projects
http://lightswitch.net/portfolio
Hierarchical Grid
Content organized/placed in vertical and horizontal segments of different widths
"A grid is truly successful only if, after all of the literal problems have been solved, the designer rises above the uniformity implied by its structure and uses it to create a dynamic visual narrative of parts that will sustain interest page after page."
"The greatest danger in using a grid is to succumb to its regularity. It’s important to remember that the grid is an invisible guide that exists on the “bottommost level” of the layout, the content happens on top of it, sometimes constrained and sometimes free to move."
Timothy Samara
Example Website : Frame Optik
Responsive Grid Demo
Click here to open the coded version of this grid in another browser window. Reduce the width of your browser in order to see how this grid responses to smaller screens.
Responsive Grid Example
http://lightswitch.net/about/our-story
Grid based site examples
Taken from the 960 Grid System website. You can see how things are measured and arranged in the 12-column grids. The 960 Grid System is older and not responsive but it was a popular framework for a while. It's 960px can be easily divided into 12, 6, 4 and 2 columns, for example.
Books
Making and Breaking the Grid by Timothy Samara
Grid Systems in Graphic Design by Josef Müller-Brockmann