Grid systems: Discover the perfect building blocks for your website design

We all start somewhere. As a new designer, I couldn’t have cared less about structure in my designs. I would open up Photoshop, and push pixels around until I made something that I thought looked cool. As I learned to code, my process was similarly haphazard.

I do not look back on the old days with too much fondness. My work was sloppy and unfocused. I had no clear goals. As a beginning, I suppose that isn’t so bad, considering that most of my design education came from Photoshop tutorial sites, my work wasn’t terrible.

But then I learned about grid systems. I forget exactly when and how they became popularly used in web design, but all of a sudden, every web-design-related site I went to was bursting with articles about 960.gs, or some other grid system. The importance of providing a consistent visual structure in our layouts was emphasized by all the big names, and turned into a trend.

Just as rapidly the trend became an industry standard, and now most of us don’t think twice about whether or not we are going to implement a grid system. The only question is, which one? Will we go with one of the big names or a lesser-known variant, or even make our own?

In this article I’d like to take a look at the second option: new and lesser-known grid systems. There is always someone out there coming up with new ways to solve the various problems of layout, and I think it’s important to be familiar with as many approaches as possible, so let’s look at some basic grid frameworks.

Simple grid systems

34Grid

34Grid is all about equal column distribution. It can accommodate unequal distributions as well, but that is not the primary purpose of this grid system. For those of you who want to divide most or all of your pages into horizontally equal portions, this is your framework.

How it works

The framework is designed to be adaptable to your needs, so you don’t just download and go. You need to configure your grid on the project’s home page first. A quick form allows you to determine how many columns will fit in a row, how big your margins will be, and whether or not to apply CSS3 transitions to your columns when your viewport changes size.

The code itself is divided into two CSS files: one with the base code, and one with all of the media queries. The CSS classes are simple. Applying ‘.col_1’ to a column will fill the row to 100%. ‘.col_2’ will create a column with a width of 50%, and so on.

In addition img elements, objects, and some others are automatically resized. There is an extra class to help video objects behave. The project’s website provides advice on how to get Facebook and Twitter embeds to play nice.

Drawbacks

There doesn’t appear to be any way to nest columns, or create more complex column arrangements inside a single row. On the other hand, if you don’t need complexity, and you just want a simple framework that you can adjust whenever you need to, 34Grid will do the job.

Simple Grid

Simple Grid is a responsive option that maxes out at a width of 1140 pixels. In other words, while it is designed to play nice with tablets and phones, Simple Grid makes sure that larger screens aren’t left out.

How it works

As the name would imply, this grid system is quite lightweight. The whole thing comes in a four-kilobyte uncompressed CSS file.

Class names are designed to be easily understood: ‘.col-2-6’ will divide the row into six columns, and define the column width to two columns wide. Each row can be divided into one column, ‘.col-1-1’, or two, three, four, etc. all the way up to twelve.

Drawbacks

Like 34Grid, there doesn’t seem to be any provision made for nesting columns. Also, the way margins are handled for first and last columns, may cause difficulties when creating, for example, a photo gallery.

Toast

This one is for anybody who prefers a simple grid with plain-English class names. It’s responsive, easily understood, and quickly implemented.

How it works

After your usual ‘.container’ and ‘.grid’ elements are put in place, the columns are implemented the old fashioned way. One class (‘.unit’) is used to define the general attributes of a column, and another class is used to define the width. Rows can be split into 2-5 columns, and the class names all look something like this: ‘.one-of-three, .two-of-three’.

Also included are some basic typographical styles.

Drawbacks

Once again, this is a grid framework meant for uncomplicated layouts, so no provision for nested columns. Also there is only one break point, set at a viewport width of 650 pixels, so some of your columns may prematurely end up rather wide.

Advanced grid systems

Proportional Grids

Matt (AKA Boon) is a bit like me. He loves design, but doesn’t love math quite as much. As a result, his Proportional Grids seem to do away with endless calculations as much as possible by depending on the box-sizing property. The result is a complete, but still pretty lightweight, grid system that covers your bases for responsive layout.

How it works

When I say that this system depends on box-sizing, I mean that columns are given percentage widths without accounting for gutters. Fixed-width gutters are defined by padding; and box-sizing makes sure the columns play nicely together.

Gutter widths and most other measurements are defined with “ems”. True to the name of this grid, column classes are proportional (ie. .col-one-third, .col-two-thirds), and columns are more or less infinitely nestable, which is something I like very much.

Classes are included for changing column dimensions at three different break points. The media queries themselves are structured in the “mobile-first” fashion, in keeping with standard practices.

There is a separate stylesheet for Internet Explorer 8 and older. Seeing as IE8 does not support media queries, and versions older than that don’t support box-sizing, they are provided with a fixed-width layout.

Also included are SASS (both .sass and .scss) files for quick and easy customization of the grid system.

Drawbacks

I wouldn’t mind having some more column widths to work with (fifths, sixths, eighths). Otherwise, this is a largely error-free and well-rounded grid system.

One%

Of the advanced grid systems on this list, One% is the simplest, but it is by no means incomplete. It’s designed to accommodate somewhat larger screens, and large UI elements, if its home page is any indication.

The name comes from the fact that the grid and column width is calculated so that it always equals 99%, instead of 100%. This eliminates the need for some of the more complex repeating decimals and number-rounding that browsers are often forced to do.

How it works

The grid itself is divided into the classic twelve columns. The classes are simple (.onerow, .col1, .col6), and I like that you, mostly, only use one class per column.

Two break points are included by default: 768 pixels, and 1024 pixels. If I’m honest, that first one seems a bit… big… but you can always add another break point if you need one. Two desktop layout width examples are also provided: 1000 pixels, and 1200 pixels.

On the projects home page, you can download Photoshop action files and PSDs suitable for mocking up your layouts with this grid system.

Drawbacks

My two big problems here are the usual ones. First: no nesting columns. Nesting columns are good, people! Second: The last column in every row needs to have the .last class applied to it.

Flurid

A cross-browser CSS grid framework that doesn’t hide pixels in margins! That’s the tagline for Flurid, and a quick look through to documentation will tell you why: Flurid’s creator really doesn’t want your layout to break. Ever.

Here’s the thing, because of the way sub-pixel rounding works, a browser will occasionally say “screw it” and put the last column in the row somewhere it shouldn’t go. Flurid is built for stability, so that your layout will always work, even on older versions of IE. (Compatibility is listed as IE5+.)

How it works

Flurid has all the features you’ll need: regular columns, mixed columns, nested columns, and shifted columns. The list of possible column widths and classes is extensive, and ratio based, so you’ll want to give yourself time to get familiar with them.

Some reasonably complete documentation is provided via GitHub, as well as a jQuery plugin that adds extra features—yes, it comes with its own jQuery plugin, which provides equal height columns, and can put alternating classes on your columns, for your styling pleasure.

Drawbacks

It’s that pesky .last class again. Still, according to the documentation, there’s a good reason for it this time.

Ezequiel Bruni

Ezequiel Bruni is a web/UX designer, blogger, and aspiring photographer living in Mexico. When he’s not up to his finely-chiselled ears in wire-frames and front-end code, or ranting about the same, he indulges in beer, pizza, fantasy novels, and stand-up comedy.