A jQuery based fluid grid system template based on Nathan Smith’s 960 Grid System. Allows multiple layouts including 12 or 16 fluid columns and 12 or 16 fixed columns.
Designing with a Grid
I wanted to try and give some insight on how I created Version Four using a grid, and how I went from wireframes to the finished website you see here.
Thinking with Type: Grid
An on-line companion to the book Thinking with Type by Ellen Lupton that contains a section on single-column, multi-column and modular grids.
O rule + Golden Proportion for Calculating the Gutter in a Grid
There is practically no (or very little) documentation about this problem on the web or in many typography or grid design books.
Photoshop 4 Column Grid
A free 4 Column Photoshop grid template for a 1024×768 screen resolution by Ray Gulick.
Columns & Grids
Article on Mezzoblue exploring the different column options for grid based designs.
Grid Calculator
A simple tool that calculates the overall width of your grid by setting the font size, number of columns, column width and gutter width.
The Complex Grid
Creating a complex grid system that allows for a layout to be divided into 2, 3, 4, and 6 columns and that’s based on Karl Gerstner’s grid for CAPITAL magazine.
Six Creative Column Techniques
Effective ways of getting creative with your columns in grid-based Web design.
Gridmaker
An online tool where you can specify the width, columns, gutter and baseline of your grid and then save it locally in JPG format.
The Funniest Grid You Ever Saw
An article demonstrating how the grid that was built for The Onion functions in practice.
960 Grid System
An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
