---
title: 'Better Grids: Lessons Learned'
teaser: Common problems and their solutions when using grids.
tags: design
author: Chad Mazzola
published_on: 2011-02-10
---

After our first Design for Developers workshop in December, [we shared a few
examples](https://thoughtbot.com/blog/post/2167846199/recap-design-for-developers)
of student work we especially liked.

The [next Design for Developers
workshop](https://thoughtbot.com/upcase/design-for-developers) is just a few
weeks away, and I thought it would be interesting to highlight some common
problems our first group of students had while working on their projects,
specifically around grids.

We asked all students to use the 12 column, 960 grid when designing their pages
in order to focus their work. However, it was very common for students to build
unnecessarily complex grids instead of taking advantage of the simplicity that
the 960 grid offers. Let's look at four examples of problematic grids, along
with strategies for improving them. As you'll see, the solutions are
straightforward: make it simpler!

### The uncomfortable quartet

The first two examples have a similar problem: they are confused about whether
they want to be a 3 or 4 column layout.

![''](http://images.thoughtbot.com/ui/grids/original-1.png)

In the first example, the three columns on the left group together nicely. But
the column on the right doesn't feel coherent with the rest of the layout.

![''](http://images.thoughtbot.com/ui/grids/fix-1.png)

My solution? Stick with a uniform 3 column grid. The wider, more regular columns
create a better rhythm across the page, and also give you more room to work
with. The student who built this page was using the small column on the right
for a navigation list. But it would be better to move that elsewhere on the
page, and let the content on the left fill the width of the page. Often times
using the grid correctly means re-thinking the placement of elements on the
page.

![''](http://images.thoughtbot.com/ui/grids/original-2.png)

The second example is similar, but has even more problems. The three columns on
the right stray from the grid in an attempt to fit themselves into a space that
is probably too narrow. The contrast with the correctly sized column on the left
is awkward.

![''](http://images.thoughtbot.com/ui/grids/fix-2.png)

In this case, a uniform 3 column grid would also work, as would a uniform 4
column grid. Because a 12 column grid system can be equally divided by both 3
and 4, these column sizes are the most reliable choices when working with the 12
column 960 grid. They will create equal divisions of the page that are wide
enough to fit most content, and as we'll see below, they look good when matched
with each other on the same page.

### Mix and (mis)match

The next two examples suffer from awkward mixing of column groups.

![''](http://images.thoughtbot.com/ui/grids/original-3.png)

 The first example starts with the right approach, using three equally sized
 columns through the center of the layout. The problem comes with the columns
 above and below. When mixing columns with different widths, the goal should be
 a harmony between all elements on the page. Unfortunately, in this example the
 columns clash with each other.

![''](http://images.thoughtbot.com/ui/grids/fix-3.png)

The solution is to use column groups that have a more harmonious relationship to
each other. We achieve this by matching the 3 column group in the center with a
4 column group below it, and letting the header run the full width of the page.
As we said above, 3 and 4 column groupings are often the best choice when
working with the 960 grid. The intervals are more regular and we reduce the
clash of irregular columns.

![''](http://images.thoughtbot.com/ui/grids/original-4.png)

In our final example, the middle group of columns is again well defined, but the
columns at the top and bottom again clash. The one unit of white space at the
top of the page is especially troublesome, as it stops the eye and disrupts the
flow of the page.

![''](http://images.thoughtbot.com/ui/grids/fix-4.png)

Again, the solution is to use a simpler, more consistent approach to the column
groups. We want the columns to sit next to each other comfortably, and the lead
the eye down the page naturally.

There are of course other solutions to the problems I've highlighted. But the
best approach is often to remove any complex grid structure in favor of
groupings of 3 or 4 columns.

If you browse through the example sites on the official [960 grid
site](http://960.gs/) you'll notice that many of them are using a simple 3 or 4
column layout. A straightforward approach to the structure of your page doesn't
have to limit your design. Instead, it provides a solid base that will introduce
clarity to your layout. And that's always beautiful.

### Go deeper

We encourage developers who are looking to learn more about grid systems and
other fundamentals of visual design to sign up for our next  [Design for
Developers workshop](https://thoughtbot.com/upcase/design-for-developers),
taking place Feb 21 through 23 at our Boston office.