Last week I posted the anatomy of a grid 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.
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 grids 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.
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.
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 grids are like column grids 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 grids 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 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.
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 grids — 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?
Download a free sample from my book, Design Fundamentals.
Great breakdown Steven, I rechecked my own blog after reading your post and, predictably enough, I’m using the column grid layout. What would be really helpful is if you could link to sites using the layouts your talk about as real world examples.
Thanks Alex. Yeah I think many grids online tend to be column grids. It makes sense to given how online the length of the page is so dynamic.
I’ll see if I can come up with some example sites and put together a post with examples. I just added the idea to my collection of ideas for posts. I’m not sure how many manuscript grids I’ll find, but there should be examples of the other 3 types.
“Hierarchical girds — can be used when none of the…”
You probably meant “grids”.
Feel free to remove this comment.
Thanks J. I found a couple more of the same and fixed all of them. Appreciate you’re pointing out the typo.
This is well written and comprehensive, other site posts I’ve read are too wordy. Its helped me get a better understanding of grid systems. Thanks for posting.
Thanks Chris. I’m glad you liked the post. Funny though. I don’t think anyone has ever accused me of using less words. 🙂
I’m not sure about if it’s less wordy as this was the first comparison I found but I did find your writing to be very precise while still being clear 🙂
I also really liked your summary
overall great article 🙂
Thanks Chris. 🙂
well it took pressure off us all
THANKS A LOT. this helped me with my art homework as we were to find types of grids truly appreciated
Glad I could help Ashley.
To make things more clear and clean within your blog I would put your example under the subgroup instead of before/on top. Maybe have a link to where you can click “Example of Modular Grids”
Besides that, it’s a clear and understanding layout. Thank you!
Thanks Danielle. I see what you mean. I take it the way I have it now each example looks like it belongs to the section above instead of the the section below. Is that right?
My teacher explained we have to draw numerous grids in different variations but i found this and it helped me out alot
Hi Samarea. I’m glad I could help, though it’s probably still best to follow your teachers instructions. 🙂
Great article, it really helped in my academics. Thank you 🙂
You’re welcome Dhwani. I’m glad I could help.