4 Types of Grids And When Each Works Best

Posted: 06 Jun 2011 05:30 AM PDT

Last week I posted the anatomy of a gird and touched on what each part of a grid is and does. Parts like columns and modules, gutters and margins can be combined in different ways to form distinct types of grids.

Today I want to look at 4 grid types and when you might use each.

Manuscript grid
Column grid
Modular grid
Hierarchical grid

Ideally by the end of this post you’ll have a better idea why you might choose one type of grid over another for a particular project.

I’ll be referring to various grid parts throughout so if those parts are unfamiliar you may want to visit the anatomy of a grid post.

Manuscript grid

Manuscript Grid

Sometimes called a block grid or single column grid, the manuscript grid is the simplest grid structure. It’s mainly a large rectangular area taking up most of the space inside a format.

The primary structure is defined by large text blocks and margins, which position the block within the format. Its secondary structure defines the location and proportions of folios, footnotes, running headers, and other secondary information.

Manuscript girds are good for extensive and continuous blocks of text. They’re used in books and long essays and perhaps lend themselves well to blog posts. They aren’t limited to text though. Images can be used to fill the block.

By adjusting the margins designers can help create interest. More opportunity for this exists where two page spreads are used as in magazines or books, but even on a single page interest can be created through margins alone.

Wider margins — lead to narrower text blocks, which helps focus the eye on the text and creates a sense of calm and stability.
Narrower margins — force the text block to the edge of the format creating tension as the two near each other.

Asymmetrically placed text blocks add visual interest and leave a larger block of whitespace on one side to allow the eye to rest.

Because of the simplicity of manuscript grids, typography plays an important role in creating visual interest. Your choice of typeface, font-size, leading, measure, hierarchy, etc will make up most of your design choices.

Given the name we naturally associate manuscript grids with the printed page, however if you think of any fixed width layout it’s essentially one large block located within a format (the browser window).

Designers typically center these layouts, but with the above ideas in mind perhaps there are better places to locate your layout.

Column grid

Column Grids

When people think of grids, especially online, they likely think of column grids. As you would expect column grids are made up by placing multiple columns within the format.

Column grids are good when discontinuous information needs to be presented.

For example you might have various asides, pull quotes, etc in your design, which can occupy different columns in the grid. One column might be reserved for text, another for images, and yet another for image captions.

Columns can be dependent on each other, independent from each other, and crossed over by design elements. This leads to a large amount of flexibility when organizing information on the page.

You can separate blocks of information by placing them in different columns and yet still show a connection between them. Perhaps text in one column and images and captions in different column next to the text the image relates to.

The width of a column should depend on some element internal to the design, most likely the size of the text.

A column should be able to accommodate a comfortable measure for reading and avoid excessive hyphenation at the end of lines. Too wide or narrow a column and reading becomes difficult.

Column Gutters

When the margins are wider than the gutters between columns the eye is guided inward and tension is eased. When margins are narrower than gutters the eye is directed outward and more tension is present.

There are no hard rules, but traditionally if the size of the gutter is x the margin is usually set to be 2x.

Flowlines can be used in column grids to help set the subordinate structure or to allow for unusual breaks in text and images. Hanglines and baselines can help establish where different elements will be positioned vertically within the columns.

Modular grid

Modular Grids

Modular grids are like column girds with the addition of horizontal divisions marked by rows. The columns and rows and the gutters between each create a matrix of cells or modules.

Modular grids are good for complex projects that require more control than a column grid can offer. Image galleries and shopping carts are likely candidates for modular grids.

Modular girds lend themselves to the design of tabular information such as charts, forms, navigation, schedules, and of course tables of data. They can help standardize the space in tables and help integrate tables with any surrounding text or images.

Each module in the grid can define a small chunk of information or adjacent modules can be combined to form fields or spatial zones each designated to hold a specific type of information.

Smaller modules allow for a more flexible grid with greater precision, but they can become confusing to work with. Imagine for example setting up a modular grid in which each modules is 1px by 1px. Lot’s of flexibility, but not much practical use.

Modules can be either horizontal or vertical and the proportion of a module can be determined in a variety of ways.

Average width and height of a paragraph
Average image size
Ad unit size
Type proportions like leading and measure

Margin proportions will ideally be considered at the same time as module and gutter proportions as each relates to and affects the others.

Large publishing systems that present information across a variety of formats often use modular grids to keep design proportions consistent. This can help a company maintain brand consistency.

Aside from their practical uses, modular grids have developed an aesthetic image.

Between 1950 and 1980 they became associated with an ideal social and political order that has its roots in rationalism. The Bauhaus and Swiss style celebrate objectivity, order, and minimalism and turned to modular grids to maintain clarity in form.

This order and clarity can be used to create additional meaning. For example it often conveys a technical or urban feeling and naturally communicates mathematical information.

Hierarchical grid

Hierarchical Grids

Hierarchical grids are commonly found on the web. They’re based more on an intuitive placement of elements, which still conforms to the needs of the information.

Customized proportions are typically used in hierarchical grids instead of regularly repeated intervals. Column widths tend to vary as do the location of flowlines.

They can be thought of as loose organic grids. Development often begins by spontaneously placing design elements. Later a rational structure to coordinate those elements is determined.

Hierarchical grids are good when a project requires an odd grid that doesn’t easily fit one of the other grid types and can be used to unify disparate elements and create a superstructure for organizing them.

If you’ve designed sites where you carefully align elements to each other without using one of the previous 3 grid types, you’re probably approaching a hierarchical grid structure in your design.

Summary

The 4 grids above are the main types of grids you’ll encounter. Each has a different function as far as holding content and choosing the right grid to use should come down to the content for your specific project.

Manuscript grids — are the simplest and they work well when presenting large continuous blocks of text or images.
Column grids — work well when the information being presented is discontinuous and different types of information can be placed in different columns.
Modular grids — work best for more complex problems where columns alone don’t offer enough flexibility. The introduce horizontal spaces between blocks of content.
Hierarchical girds — can be used when none of the above grids will work to solve the problem. They tend to be created organically by first placing design elements on the page and then finding a rational structure for presenting those elements.

Hopefully everything above has helped you see that grids come in different varieties and more importantly when you might choose one grid type over another. Each can be the appropriate choice for a website as each allows for variety within the grid.

If you currently work with grids which type of grid to you use most frequently?