The Grid System » columns

Long Live the 12-Column Grid

Antonio Carusone — Fri, 07 May 2010 14:44:14 +0000

When I first crossed the great divide from print to web, one of the earliest things I tried to do was introduce a flexible multi-column grid (you know, like a magazine).

Web Design with Grids

Antonio Carusone — Fri, 07 May 2010 14:42:30 +0000

People, including myself are building sites using grids. Now it seems to me that when you’re designing in a browser you want to be able to follow the grid’s principals all the way through the process.

Fluid 960 Grid System

Antonio Carusone — Wed, 06 Jan 2010 15:40:55 +0000

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

Antonio Carusone — Fri, 18 Sep 2009 13:58:04 +0000

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

Antonio Carusone — Thu, 23 Jul 2009 02:30:50 +0000

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

Antonio Carusone — Mon, 08 Jun 2009 14:02:10 +0000

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

Antonio Carusone — Mon, 08 Jun 2009 13:57:46 +0000

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

Columns & Grids

Antonio Carusone — Mon, 20 Apr 2009 18:35:40 +0000

Article on Mezzoblue exploring the different column options for grid based designs.

Grid Calculator

Antonio Carusone — Wed, 11 Mar 2009 14:18:11 +0000

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

Antonio Carusone — Fri, 09 Jan 2009 16:52:18 +0000

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

Antonio Carusone — Mon, 05 Jan 2009 16:39:20 +0000

Effective ways of getting creative with your columns in grid-based Web design.

Gridmaker

Antonio Carusone — Tue, 23 Dec 2008 16:24:48 +0000

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

Antonio Carusone — Tue, 16 Dec 2008 16:09:09 +0000

An article demonstrating how the grid that was built for The Onion functions in practice.

960 Grid System

Antonio Carusone — Thu, 04 Dec 2008 15:06:43 +0000

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.