A Brief Look at Grid-Based Layouts in Web Design

Mar 24 2010 by Shannon Noack | 32 Comments

A Brief Look at Grid-Based Layouts in Web Design

Take a look at some of the biggest sites out there today that are showcasing top-notch designs. It’s very likely they’ve used a grid of some sort. Grids enable stability and structure in a web layout, giving the designer a logical template to build the site on.

Grids don’t mean you have to have a boring design. A good designer will apply the fundamental rules of using grid-based layouts but also knows how to break these rules properly.

"The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice."

- Josef Müller-Brockmann

Grid Basics

Let’s talk some grid lingo. A grid is the division of a layout with vertical and/or horizontal guidelines to incorporate margins, spaces and columns in order to provide a framework for organizing content.

Grids are traditionally found in print work but are very applicable to web design. A grid doesn’t have to make a site look like a newspaper’s layout, but it can certainly aid in creating a uniform structure to start the design with.

A grid is simply a tool to help designs, not something that should hurt the design in any way.

Understand and Follow the Rules

When you start learning a new skill in any given subject, you should follow its guidelines. Learning the fundamentals from the beginning ensures that you are able to apply its principles effectively.

Starting out with grids is no different; you should follow the grid and keep all your design elements aligned and in its place. Using a grid within your designs helps bring structure to your content and gives you a place to start from, but should never stifle creativity.

There are two ways to establish a grid template:

Create your own grid

There are many different theories on the best way to set up your own grid and the options are endless, but in the end, you must choose what works best for you and the project at hand.

You can divide a blank document mathematically, creating an even or odd number of columns to work with. It’s usually helpful to think about gutters—the space between columns—and integrate them into your grid system as well.

Your grid can be as complex or as simple as you like. The more complex and elaborate your grid layout is, the more freedom you have within it. The simpler it is, the more room for interpretation there is. The choice is up to you.

Here are a a couple of examples of grids that are created in Photoshop using guides (View > New Guide):

Create your own grid

Download a ready-made grid template

There are standard grids available for you to use that will aid website development, as well as cut down the amount of time it takes to create your own.

Perhaps one of the most popular grids available is the 960 Grid System. Started by Nathan Smith, the system allows for you to choose from a 12, 16 and 24-column grid.

The project started as a way for Smith to "scratch a design itch."

"I am simply sharing the grid dimensions that I have found myself gravitating towards over the past year or so. If others can benefit from that, then all the better," says Smith about the 960 Grid System.

The download package includes files for CSS, HTML, Photoshop, Illustrator, InDesign and more. The design files include several grids that are very helpful in setting up a structured and clean site.

Download a ready-made grid

Break the Rules

Now that we’ve covered the very basics of grids, let’s break out of it! Grids are a great way to line up items, keeping your designs clean, user-friendly, and streamlined.

However, as I mentioned before, you can’t let the grid stifle your creativity and make you feel like you’re trapped within it’s borders. Feel free to venture out of the guidelines; everything doesn’t need to line up in order to make a gridded design work.

Items that break the grid help the design feel more organic and free-flowing, instead of table-based and boring.

Check out some examples from the 960 website with grids laid over the design, showing that grids can be beautiful and not so structured.

Break the Rules

Break the Rules

Examples of Grid Based Designs

Here are a few examples that showcase great designs and organized, user-friendly interfaces.

Some are strictly grid-laid, while others show some signs of breaking outside of their base grids.

All of them highlight the fact that using a grid doesn’t have to mean a boring-looking site.

Help Your Habitat

Help Your Habitat

Digital Podge 2009

Digital Podge 2009

Vegas Uncork’d

Vegas Uncork'd

Anton Peck

Anton Peck

Brite Revolution

Brite Revolution

Kiki and Bree

Kiki and Bree

Arvorecer

Kiki and Bree

Simon Collison

Simon Collison

Fun Tools for Using Grids in Designs

Here are a few tools for experimenting with grid-based web layouts.

Grid Designer

A fun tool to help set up a grid.

Grid Designer

Grid System Generator

Just as the name of the tool says: it helps generate a grid for you.

Grid System Generator

Grid Calculator

Another fun tool to help set up grids.

Grid Calculator

jQuery Masonry

A jQuery tool that arranges items vertically and horizontally according to a grid.

jQuery Masonry

Slammer

A grid layout application that overlays any grid anywhere.

Slammer

Tutorials on Using Grids

More Grid Resources

Grids are not the solution to every design problem and they don’t work for everyone.

They do provide a great starting point for solid, clean designs that need structure and balance. I hope you enjoyed this compilation of grid resources and examples. Try implementing grids in your designs and hopefully you’ll see the structure they provide can lend to beautiful and unique designs.

What do you think about grid web layouts? Are they good or bad? What is their role in web design?

Related Content

About the Author

Shannon Noack is a designer in Arizona and the Creative Director of Snoack Studios. Designing is her passion in life and she loves to create websites, logos, print work, you name it. She also blogs regularly here and you can connect with her on Twitter as well.

32 Comments

Guilherme Moreira

March 24th, 2010

Great article Shannon.

Thank you for the tips!

Matthew Heidenreich

March 24th, 2010

good article. I usually will start off with a 960 grid on most of my designs, as a way to line things up and keep them even. Though when I redesign my own site, I think I will be bumping up to support 1280px wide screens since it seems that it’s becoming ever so common, and many sites are starting to transition within the design community towards it. Good read, thanks Shannon.

Matt

March 24th, 2010

Something about a nicely laid out grid really gets me going. Maybe it has something to do with my love for traditional publishing. Maybe it has something to do with math. Either way, great post.

Jonathan Chacko

March 24th, 2010

Great article and resource for designers and developers.
I’m currently working to create a 980px grid. Most of our users are not ready for anything wider than this.
Thanks for the article.

EricM

March 24th, 2010

I am surprised you didn’t mentioned blue print…

Adam

March 24th, 2010

I’ve always used the 960 gs. It makes it much easier to lay everything out in photoshop.

Michael Lajlev

March 24th, 2010

Does anyone know about a piece of software like slammer for windows?

Nice article.

Bruce Ng

March 24th, 2010

thanks for the article Shannon – 960.gs is a great resource, and this is a pretty good review on grids in webdesign!

i started off in webdev without much print work in my portfolio, so i take any chance i can get to look at new grid layouts. it definitely helps me to understand why things look like they do.

Joel

March 25th, 2010

Great article – I’ve been using grids for the past little while… they save so much time at the beginning which is handy so you can get to the visual part quicker!! :-)

Jordan Walker

March 25th, 2010

Really a lot more appealing to the eye.

Bertrand

March 25th, 2010

Structure is often wrongly caught by designers as a restriction, something that limit their creativity. I hope designer learn the beauty of mathematics and integrate them in their designs, making them more appealing using the laws of mathematical beauty.

Shannon

March 25th, 2010

Thanks for all the great comments! I love the 960 grid as well, and end up using it often in my work.

@Jonathan Chacko – 980 is an interesting choice, what made you choose that? You should post a link to your finished product when you’re done, we’d love to see it.

@Bertrand – I agree! I am happy to hear so many people are using grids these days and are open to the idea of structure that can still be beautiful.

lava360blog

March 25th, 2010

great explanation and very well defined. Thanks Shannon Noack

rob

March 25th, 2010

@eric and still blueprint is ignored…

Polly

March 26th, 2010

Really useful and interesting stuff. It seems the theoretical part of design is getting less attention by the hour, and it’s nice that there are people out there who write articles like this to remind us that you can’t be a designer without knowing the basics – grids, color theory, typography… All those tings that we (should) learn at school. Thank you Shannon for the great article!

MyFreeWeb

March 26th, 2010

I hate grid systems. Widths in px — SO 2002!
Check out this: http://en.myfreeweb.ru/why-i-dont-like-css-grids

Jesus Couto

March 26th, 2010

yet another grid something post……

Bill McEntee

March 26th, 2010

In our quest for mastery of the latest technologies, we often forget the visual design basics that make our communications effective.

Thank you for focusing on the subject. It was a good way to jog my thinking in the right direction for a new project next week.

Andew Nash

March 26th, 2010

Great article! being from a book design background it was always done thing work the grid out and the creative has a place to relate to.

Brian McHugh

March 26th, 2010

Cool firefox addon also http://www.puidokas.com/portfolio/gridfox/

Shannon

March 26th, 2010

@eric and @rob – I’ve never heard of blueprint actually, and I didn’t mean to ignore it :) Eric just didn’t say much about it so I wasn’t sure what it was. Thanks for adding it here though! http://blueprintcss.org is the link for others that want to check it out as well.

@Polly – you’ve hit it on the head.. you certainly can’t be a great designer without knowing the basics. Thanks for your comments!

@MyFreeWeb – sorry to hear you don’t like grids, but as you can see from the comments, it’s definitely not old school. It’s used and praised by many, you just have to learn how to use it properly so you can be comfortable with it. Good luck with your project though!

JJ NOld

March 26th, 2010

I have used the 960 grid from concept to coding and while I do like using a grid in Photoshop, I have found that the CSS and XHTML grid system can be a bit daunting and restricting. I prefer to use the grid for mock-ups, but code the site from scratch. Good way to keep my coding chops up.

Tin

March 27th, 2010

Thanks for the useful informations. I was lucky to read this before building my website.

Brad

March 29th, 2010

Nice article and thanks for the download.

Stefan

April 2nd, 2010

Great article, i always use the 960.gs in my projects!

Jonathan Chacko

April 6th, 2010

@Shannon I went with a 980 grid system after doing research on our users. Most had upgraded screen sizes allowing us to increase our content with from 900px, but many are still confined to view content under 960px.
The 980px width allowed us to create designs which show up on most screens while our content is visible to all. Once the pages are completed I’ll post a link.

Stu

April 19th, 2010

I’m actually quite shocked that there are people out there that don’t use grids! It’s the way I was taught to design over a decade ago and as far as I’m concerned, designs look wrong if they don’t conform to a grid of some sort.

TomPier

May 6th, 2010

great post as usual!

Jeremy Goheen

January 26th, 2011

I am interested in what are the preperations for grid design. Is this the only choice of method when you out in the field for a job?

Manuel Lopez

March 2nd, 2011

I have been working for a while on the 960px/12 column grid and the left and right margins always bothered me. I couldn’t help but focussing on the fact that they were 10px wide and the rest was set to 20px making everything squish up against the borders.

I layed out a 980px/12 column grid last night and I still have problems creating 3 equal colums within.

Nonetheless, I am very happy with how it looks. It’s very light on the eyes, information is distributed harmoniously with usabilty in mind.

Maybe I’m wrong in keeping the 60px in 12 columns, but it’s the only logical width that can hold 3 and 4 equal columns. Has anyone else had this problem?

Cheers from Chile!

Shannon

March 3rd, 2011

@Manuel – I agree, sometimes the 960 just doesn’t seem to fit with what I’m doing, so I just create my own grid for the project. I love wide side margins too, and the 960 isn’t always the best for that. It is a great starting point, especially if you’ve never used a grid before. Thanks for sharing your experience with grids here!

@Jeremy Goheen – There are a many different methods to use with grids, but starting with a grid in general is a good idea for any website project. Hope you found the information here useful!

Monkey

May 12th, 2011

At last! Someone who understands! Thanks for psonitg!

Leave a Comment

Subscribe to the comments on this article.