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.
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 layout:
Or, you may take it to the next level and divide your page into 6 or 8 sections:
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.
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 Grid?
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.
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 columns.
Click to enlarge the screenshot to see how all three columns are used in the footer section.
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.
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.
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.
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 enough.
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 create a 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.
The Gridfox 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 design.
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.
Megan is co-founder and editor of A Padded Cell and administrator at The Webmaster Forums. She has been designing websites since 1997, with expertise in design, information architecture, usability, HTML/CSS, Drupal theming, and more. She is available for short-term or ongoing freelance work in any of those areas. Read her web design blog at MeganMcDermott.com or check out her portfolio.
