Grids in web design

Grids on the web are nothing new. But the way web designers have been taught to work with them differs from the way they were originally used in traditional graphic design.

Let’s take a popular grid for the web as an example. 960.gs is one of the most widely used CSS grids available, consisting of 12 fixed-width columns, similar to the blue columns seen at the top of this page.

960.gs and other available grid systems allow designers to use these 12 columns in an impossibly large number of combinations. 12 columns, 2 columns of 6, 6 columns of 2, 5 columns and 7 columns, 5-2-5, 5-4-3, 3-3-3-3, 4-4-4, 6-3-2-1…

You get the idea. A lot of possibilities. Too many possibilities.

Restraints are healthy. Restraints help us create better work. How can we, as web designers, embrace grids with a different, restrained approach?

Our use of grids is quite different from traditional usage in graphic design. In traditional graphic design, our 12 columns would in fact be units. Combining units builds the columns on which the page is based.

Take the example below. Here we have four columns, each made up of three units.

Additionally, we could create 6 columns of 2 units each.

Wait a second — why don’t we combine the four column grid and the six column grid? We could get some really interesting layouts out of that.

We can then use our units to size elements within our columns, such as images and other media.

The horizontal grid created by our units and columns gives us a vast array of opportunities for interesting layouts, while keeping a healthy restraint on our designs.

As well as horizontal layouts created by combinations of columns formed from multiple units, we have the baseline grid. The baseline grid is the vertical grid on which the bottom of our letters rest. On this particular page, there is a baseline grid of 28px.

In traditional graphic design, the baseline grid helps to create modules and regions. Modules are the building blocks of any decent print-based grid. One of the most popular examples of a modular grid system in use is Massimo Vignelli’s Unigrid system for the National Park Service. The modules in print-based grids are similar to the units we talked about earlier, but different in that they relate to vertical layout as well as horizontal. Regions are simply vertical groups of modules which our content will fill — similar to the columns we made out of our 12 units.

Vertical structure is more difficult on the web than in print. For one thing, the web is a completely malleable canvas. The user can change things like the font size and window width with ease, potentially throwing our pain-stakingly build grid out of the window. Content changes on the web, too, so it's futile trying to create a strict vertical rhythm in our web pages.

However, if you can pull it off, the benefits are quite great. Vertical rhythm can create a more harmonious website, and present content in a more enjoyable way. I’ve created a couple of tools to help with vertical rhythm myself:

• Basehold.it — a baseline grid generator for setting up a baseline on your website
• Baseline.js — a jQuery/JavaScript plugin for maintaining a baseline when working with awkwardly sized images

Grids can quickly evolve into incredibly complex systems, but implemented correctly and thoughtfully can make organising the content of a website significantly easier.

There are a number of resources that can help gain a better understanding of grid systems, for the web and for traditional print design. Here are a few of my personal favorites:

• Khoi Vihn & Mark Boulton - “Grids are Good”
• Grid Systems in Graphic Design - Josef Müller-Brockmann
• Ordering Disorder - Khoi Vinh
• The Vignelli Canon - Massimo Vignelli