Home > 1 > To Grid or Not to Grid: Advantages and Disadvantages

To Grid or Not to Grid: Advantages and Disadvantages

via FriendFeedLinks – Home on 11/25/09

Shared 34 times

The grid is a commonly used component in both web and graphic design, promoting organization and alignment in the final output.

Better alignment and order can, of course, lead to a more effective design, whether it is for print or the web.

When used correctly, a grid can add user-friendliness to a design, allowing the user to predict where the information they need is placed.

In order to receive the benefits of the grid, though, a correct use of the grid must be in place. Both inexperienced and experienced designers may not know how to correctly and effectively use a grid system.

In this article, we’ll discuss various grid frameworks, examples of grid-based graphics and web design, and the advantages and disadvantages of using the style of design for your next project.

Depending on the content needs per website/graphic design, and the overall look that needs to be achieved, the use of a grid may or may not come in handy.

Furthermore, when a grid is used, it must be used correctly to match the content and style requirements.

Designing with a grid has become an increasingly popular choice, for the obvious reasons above. However, not all designers use the grid, and rightfully so.

Despite the benefits above, a strict grid is not always an appropriate choice.

The Point of Using a Grid

The grid was originally used in graphic design, and more recently in web design to create order in design. It is still used for that method, of course, but lately it has become a design style rather than just a tool.

Therefore, the point of using a grid can be for any of its traditional means, or to comply with an upcoming trend with a grid-like look.

If using a grid for aesthetic reasons, rather than for the sake of the trend, a designer would be using the grid to take the ‘guess-work’ out of design. Any form of art seems to have limited rules and regulations — seemingly making it all that much harder to become great at.

However, just like in many other forms, art and design can have technical guidance. This guidance makes it easier to visualize divine proportion or proportions otherwise, create equal margins and padding, and can help the designer to keep the overall wireframe in place when implementing visual details.

Common uses of the grid are in blog themes, and more specifically magazine blog themes. The magazine look is the original grid design — columns, rows, and an overall table-like appearance.

In recent years, blogs started popping up with a magazine-like approach, and therefore its counterpart look was named the magazine-style theme.

Magazine Grid-Based Layout

As one may have guessed, like blog themes, grid-based design is great for content heavy websites, or graphic designs that also have large content requirements.

There are some instances where smaller websites may include a grid-inspired design, and below we’ll look into situations where that may or may not be the right choice.


Many of the main advantages have already been highlighted above, but we’ll go over a few more in detail below:

  • A grid can add better alignment, balance, and equality in spacing for a much better visual experience.
  • The wireframe is directly implemented into the design phase.
  • Grids can replace the few benefits tables have always had over more modern terms of website coding.
  • Grids add organization in the coding with markup and CSS in addition to the design.
  • There is enough organization to easily switch around pieces of content, features, etc. with little to no design adjustments.
  • Can quicken the design process overall.
  • It is a great way to keep track of nested grids (grids within the main grid).
  • It is a straight-forward, easy approach to creating a modern looking webpage or graphic design, without resorting to additional visual aids or trends.
  • Grids can make it much easier to apply even proportions for dividing content, and also divine proportion (the rule of thirds).

Graphic Design Grids


Despite all of the obvious benefits of using a grid, there are disadvantages as well. These are not commonly thought of, and fortunately most can be avoided.

It is important, however, to make note and be aware of these potential disadvantages to 1) know when a design should or should not use a grid and 2) if so, use it effectively by avoiding some of the disadvantages below.

  • Potentially, grids can get in the way of creativity. While it can promote alignment and organization, some designs just call for more abstraction.
  • A unique wireframe or set of content requirements may not approve of a grid-based approach. In which case, it may be better to set alignment, spacing, and balance as best as possible without the use of additional guidance.
  • The use of a grid requires a decent amount of content and visual elements. Without them, there is really no reason for a grid, as it won’t have enough to work with anyway.
  • A grid doesn’t necessarily quicken the design process. It can help to create wireframes and organization in web and graphic design, which will speed up the design process. However, if these are already in place, or are highly uncomplicated to begin with, a grid may just slow things down.

Is a Grid Right for Your Next Project?

To determine if using a grid is right for your next project, it is as easy as going over the disadvantages listed above. As one can see, each of the four points includes certain circumstances where a grid would not likely work.

Generally speaking (very generally), creative designs should stick to more freedom and not use a grid — or at least use a very lenient one.

Note that there is a difference between a creative design with a creative wireframe included, and an organized, professional design with creative elements on the side.

Below are two examples: the first, a visually appealing design that uses a grid and therefore has a lot of organization, and the second, a grid-less design that is just as effective and incredibly creative.

Kari Jobe

New to York

Also note that in the second example (above), there is still some natural alignment that the designer implemented.

Just because a complex grid is not being used, that doesn’t mean all alignment, spacing, and balance should go out the door.

Creating Your Own Grid

If mixed between whether or not to use a grid framework, many designers will often create their own mockup of a grid.

This type of grid is usually much simpler, and can be better created to meet the content needs of the design. Simply organizing a simple grid at the beginning of a project can keep the design phase organized, while still having the flexibility required.

Your Own Grid

With simpler websites, the need for a simpler grid may also come into play. This is, again, why most designers feel the need to create their own quick grids.

However, if one has limited content requirements, the use of a more simplistic grid can still be used to contain elements in an organized way.

This can be achieved by creating one’s own grid by the use of rulers, or simplifying a premade framework to suit a project’s needs.

Grid Frameworks & Tools

  • BluePrint: A CSS Framework — this is not a simple grid, but rather an entire CSS framework with a grid included. Many designers choose to use a grid that works with a larger tool to improve the design workflow.
  • YUI: CSS Grid Builder — Create the markup and CSS for a grid-based design easily with this tool from Yahoo.
  • YAML — Just like YUI, this is another grid builder. It specialized in fluid layouts.
  • 960 Grid System — This is one of the most popular grid frameworks around. Instead of a tool, this is a preset grid system that can be used in any common design software. It works at 960px wide, perfect for a webpage width, and comes in 12 and 16 columns. Many designers that work with three and four column layouts, as well as nested grids, use the 960 grid system.

Further Resources

Wrapping Up

A grid is a great option for many types of designs, but a good designer should know when to use one.

Despite its rising trend, it can get in the way dependent on the web or graphic design in question.

Be sure to fully analyze your next design to determine if a grid framework can help. If so, using a grid plan before the design phase can help with everything from the first wireframe to the last bit of detail.

Many designers don’t think about the cons that can come with something so seemingly helpful. For most designs, a grid can help, and it’s just a matter of turning those cons into positive notes.

Sometimes just a bit more planning or more effective thinking can solve most of the problems of using a grid for a design.

If something doesn’t fit, there is likely a better way to organize it.

Written exclusively for WDD by Kayla Knight.

Do you usually use grid-based design? Are there any further complications with using a grid framework, or does it overall make the design process much easier? Feel free to further discuss grid-based design below, as well as any more frameworks and examples.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: b8vV5n

Categories: 1
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: