by Megan McDermott, 28 April 2009 - 1:38am
Using a grid to define your page layout results in a more attractive,
logical layout. A grid is simply a regular series of lines and boxes that
define sections of a page. A solid structure makes layout decisions easier and
helps create a pleasing layout. This article will explain what a grid is,
provide some real-world examples, and outline a step-by-step process for
designing with grids.
What is a grid?
A grid is a simple set of lines that defines a structure for your page.
Usually, the page is defined into a set number of columns. All elements in the
design align with these columns. You may start with a simple 3-column
Or, you may take it to the next level and divide your page into 6 or 8
In this case, elements may span two or more columns, creating a variety of
options for laying out your page.
Another option is to use columns of unequal widths. The Golden Section (or
Golden Ratio) is a popular ratio for this type of layout. The Golden
Section is a mathematical ratio that has been used in design since Greek and
Roman times. Researchers have also found this ratio in nature, including
proportions between stems and branches in plants and skeletons of animals.
Using this ratio can ensure a natural and harmonious design.
In a print project, you would also define horizontal guides, giving you a
two-dimensional grid. With web design, it is difficult to control the height of
a page since text shapes often change as content is modified or the user
changes the text size in their browser. For that reason, horizontal gridlines
are rarely used in web design.
Why use a grid?
Grids are a standard way of organising things visually, from bricks to
letter, understanding how to create harmonious arrangements based on a grid
allows us, as designers, to communicate better.
Mark Boulton, Why use a
Using a grid allows you to design your layout according to regular, even
proportions. At first glance, it may seem that this would restrict your
creativity. In reality, using a grid makes decisions easier and provides a
framework for you to create a pleasing and proportioned design.
Not only are grid-based designs more attractive, they are also more usable.
With regular, even proportions it will be easier for people to find elements on
the page and read the text.
Consider the following examples. The web page layout on the left has been
designed without a grid. Notice how the placement of elements seems haphazard
and, as a result, the design seems chaotic and unappealing.
The example on the right has been designed with a simple 3-column grid. Now
the elements have logical relationships with each other and the design is more
attractive as a result.
Grids in use
The Guardian uses a strong
grid-based layout. This enables them to place content blocks in defined areas
— much as they would in the printed version. A 6-column layout provides
them with the flexibility to place elements across 1, 2, 3 or more columns.
Click to enlarge the screenshot to see how the columns extend to the bottom
of the page. Notice the sections at the bottom of the page, which expand across
multiple columns yet still align with the grid.
A simpler example is my blog, which uses a 3-column grid. Only the footer
section makes use of all three columns, while the content area spans two
Click to enlarge the screenshot to see how all three columns are used in the
How to design a grid-based layout
This article will assume that you are designing a graphic mock-up in a photo
or vector editing program. Read How to Design
Graphic Mock-ups for more information on this topic.
Determine the width of your page
The first thing you need to do is determine the final width of your
page. If you want your design to fit into an 800 x 600 screen, a 760px
width is a good choice. If you want to create a wider layout, for 1024 x
768 resolutions, 960px is a good width to work with.
Why 760 and 960? First of all, going a little smaller than the full
screen width allows enough space for scrollbars on the side of the browser
window. Secondly, these numbers are easily divisible by a variety of
smaller units, making it easier to design flexible grids.
Wondering whether to design for 800x600 or 1024x768? See the inset box
in How to Design Graphic Mock-ups.
Decide on the form of your grid
At this stage you need to determine how many columns, and in what ratio,
you will use in your design. You may choose to experiment with some
different configurations before deciding on a final grid. A simpler site
such as a blog or small business site can use a simpler grid (golden ratio,
3-column etc.). A more complex site, such as a news site or community
portal, needs more columns to work with.
Consider, for example, the Guardian example above. They have a
lot of information to fit on the page, and therefore a 6-column grid
provides optimum flexibility. My blog, on the other hand, is a simple site
with much fewer content blocks. A 3-coumn grid works well here.
Do the math
At this stage some mathematical calculations are required to determine
the size of your columns. Divide your page width by the number of columns
to determine the width of each column.
If you're not good at math, calculating your column widths for the
golden section may seem quite tricky. Remember the ratio is a:b = 1.618:1.
If all else fails, simply use a 2:1 ratio instead — it's close
Define your guides and grid
Now you're ready to begin creating your design as a graphic mock-up.
Open your favourite graphics program and create a new canvas in the width
you've chosen for your design. Drag some guides into place where your
columns should be.
I also like to set up a smaller grid to further define placement of
elements. Using the grid function in your design program, set the grid size
to a smaller number that divides evenly into your column sizes (in the
golden section example to the right we could use 10px).
This helps you to place elements consistently on a more detailed level.
This micro-grid number becomes the size of margins and padding, and even
some small design elements such as icons or buttons. You may also use it to
vertical rhythm. Matching the grid size to the font size will also help
to create a more pleasing design.
At this point your canvas may look something like this:
This is a 3-column grid in a 960px layout with a 20px micro-grid.
You may notice that if you place elements directly on the gridlines they
will run into each other. This is why you need to define some spacing
between columns, called gutters. Gutters will prevent elements in different
columns from bumping into each other.
If you've already defined a micro-grid, this task becomes easy. The size
of your gutters will be the width of your micro-grid. You may want to drag
in extra guidelines to define the gutters.
Now you are ready to place elements into your design. All elements
should be aligned along the gridlines. Using your graphics program's snap
to grid feature, this becomes an easy task.
Other tools for working with grids
extension for Firefox overlays your grid on top of your page in the browser,
helping to ensure things are aligned correctly while you are working on the
Grid Designer and the Grid Calculator calculate a grid for
you based on the number of columns, width of the page, gutters, and margins.
To discuss, ask questions or comment on this article please see the Webmaster Forums discussion on Using Grids in Web Design.