Advertisement
  1. Web Design
  2. Grids
Webdesign

A Comprehensive Introduction to Grids in Web Design

by
Length:MediumLanguages:

If you’ve never dabbled with using grids in your designs, this article is written for you. In it, you’ll learn the basic lingo, theory, and will see through examples of genuine websites how grids are used in the wild.

Topics

In this guide, we’ll be covering quite a lot, including:

  • Grids?
  • Terminology
  • Rule Of Thirds
  • 12 Unit Grid
  • Emphasis
  • Limitations
  • Mental Map

Grids?

A grid can create a basic structure, a skeleton for your design. They consist of “invisible” lines upon which your design elements can be placed. Doing so ties them together in an overall “system” and supports your composition—rationally. 

BBC

Grids help you to achieve effective alignment and consistency with little effort. “Winging it” and relying on your gut does not scale so well. If executed properly, your designs will appear thoughtful, organized, neat and structurally sound.

Good alignment, like much of design, should almost go unnoticed by your users. Less is more. Be too clever and you risk distracting the user from their primary goal of searching for specific content and digesting it quickly. That should be your focus—not showing off how nifty you can be with your design skills. Even worse would be reinventing the wheel to proove a point. A lack of alignment is very noticeable and creates a sloppy impression. This might very well result in a lack of trust from users who consume your design—unless the lack of alignment is something you are going for on purpose for whatever creative reason.

Terminology

Unit

Units are the basic building blocks of every grid. Multiple units form the overall grid. In the example below from the BBC you are looking at a 12-unit grid. The purple stripes each represent one unit.

Gutter

The narrow yellow stripes on the illustration below represent the gutters which separate each of the units. Gutters are a form of micro whitespace which give the grid some breathing room. 

Column

Now it gets more interesting. Multiple units and gutters together form columns which are effectively containers in which to place your content—strategically. It may not appear to be the case initially, but working within such constraints can be liberating. Constraints can make decisions about where to place content much easier and faster. 

In the example below, you can see three different columns at work. Each column is sized for a particular form of content or for creating emphasis.

As you can see, you have lots of options to mix up different forms of content and design elements. What you can also observe is that these columns together form a solid structure which breathes consistency and order via alignment. Not a bad price to pay for setting up a few lines and for some constraints, no?

Field

Columns of content form fields that are horizontal divisions of pages. It’s not a bad idea to strive for fields of equal height going down your pages. In practice this is not always straightforward to achieve. If your fields end up with the same height and it works for your designs, great, if not, move on and fry bigger fish.

Rule of Thirds

The “rule of thirds” uses a mini grid and implies that when you place content on certain lines that divide content into thirds, the result will be more pleasing to the human eye. This is an approach very often used in photography, for example. Although it might be a good starting point and often gets you in the right ballpark, I’d suggest taking this with a grain of salt.

When people talk about “magic intersections” which are supposed to help you place design elements, I’d urge you to take a breath and consider the potential for fluff. It’s easy to just drink the cool aid, especially since it’s not hard to follow this “rule”, but nothing about this seems mathematically or biologically special in any way—and it’s definitely not magical. 

And don’t forget that we don’t all visually perceive the world the same way. We are all different. We are not machines that adhere to some mathematically precise point of view when looking at the world. Take a look at Reddit for example. Does it look like they care about magical intersections?

Yes, the rule of thirds is a good guideline—or can be at least—when it fits and “aligns” with the image, design or whatever, but don’t take it too seriously. Break the rules whenever it makes sense. Do what feels right and go with your gut within the guidelines and techniques that you learn for your design work. “Nothing is true, everything is permitted” in design—to cite some Nietzsche out of context. Philosophically this can be argued to death—rightfully so, but in design, this represents a firm guideline to explore your creativity without “magical” restrictions. 

Go crazy, break the rules, have some fun and if you are lucky, find new frontiers! 

Divine Proportions?

While we are in the magical realm of things in design, let me rant a sec about something related: people have long believed that using the “divine” proportion of the golden ratio results in something special, divine and pleasing to the human eye. There have been experiments that question these “pre-modern” assumptions with good cause. 

Vitruvian Man
Vitruvian Man by Leonardo da Vinci

The final verdict is still out on these issues I guess—and might be for a long time—but nothing should hinder us from keeping an open mind to question these passed down assumptions. We really should go beyond magical thinking. For a while it made sense to me that the “golden mean” might be super pleasing to us humans because in nature we are well surrounded by it. But then again, convincing evidence would be nice. Maybe, maybe not, but this is not something I want to take for granted and build upon.

Twelve Unit Grid

Back to more pragmatic waters. I would like to discuss a very versatile grid and get you started with something concrete that makes for a good first system to build your layouts. A twelve unit grid is your friend. 

Etsy

Why are twelve units that handy? For starters, because they break nicely into three, four and six columns, which is flexible enough to handle all sorts of content rather easily. On top of that, you can make them symmetrical or asymmetrical—which gives you plenty of options to either play it safe or to create some dynamic layouts that go beyond simple symmetry. 

Let’s look at couple of layouts that make use of the flexibility this grid has to offer.

Four Column Grid

The main benefits of a four column grid is its simplicity, its balance and that it’s also very dependable. Each column here spans three units. The flip side is that it’s very symmetrical which can look a bit boring. 

Often, you need a main section for the emphasized content and then a sidebar for secondary concerns. In the first example below, you can see that the first column is used for branding, the middle two columns are for the main content, while the last is for content that needs less highlighting.

form
Harvard Design Magazine
Etsy
Wallpaper
marie claire

Three Column Grid

With this grid, each column spans four units. This variation is a bit more involved since it’s an asymmetrical grid and you need to be smarter about finding balance in your designs. Asymmetrical layouts like these are often considered more active and more skillful. That can and should be questioned of course!

Wallpaper
Kickstarter
Kickstarter
Wallpaper
WIRED

Six Column Grid

In this example each column spans two units, making things a little more challenging than the three column grid. It splits up each column of a three column grid into two further columns. The six column grid provides you with more options and opportunities to fine tune smaller details. If you are working on a content-rich site and need to park a lot of information, a six column grid could be a smart starting point for experimentation. Since it maybe an advanced grid, I would maybe not recommend starting out with it on your first rodeo.

Wallpaper
The New York Times

Combinations

You can also combine grids within your designs, which is why a twelve unit grid system is very handy. It easily allows you to combine blocks of three, four and six columns neatly. 

Etsy
BBC
Etsy
Etsy
BBC
Etsy
Etsy
Etsy

Emphasis

Balanced and simple layouts often feel more comfortable than overly complicated ones. The flip side is that you have to be careful not play it too safe all the time and risk looking boring. For emphasis, you can break away from the grid or highlight certain design elements through size—by combining multiple columns, for example. This can create visual interest and establish a better hierarchy within your main design elements. 

Etsy

Breaking out of the grid to create emphasis can either massively improve your design by highlighting essential pieces, or it can look really, well, dumb. Wallpaper did a great job at breaking out from the four columns and heavily emphasize the video they want you to watch.

Wallpaper
form
Wallpaper

But you need to be careful, breaking the rhythm of your grid too often results in a layout that looks broken or overemphasizes too many parts so nothing sticks out anymore.

Limitations

A question which frequently arises is when to use a grid in design? Always! It’s always a good decision to go with a grid because they help with balance, hierarchy, alignment and consistency. 

Then there is always the argument that a grid constrains your work. But that is a good thing since a grid can actually facilitate your creativity and guide your decisions in a constructive manner. Such restrictions can be a good starting point for your work. So when you have constants, like the size of ads that are given to you by your client, you have a starting point to build your designs around it. The size of your grid can and should pay attention to such limitations.

In the example below from the The Wall Street Journal, you can see that the size of an ad, marked in green, resulted in a design decision to build part of the grid with that dimension in mind.

Mental Map

If you are successful, your grid will help with building a mental model of your site and its individual pages. That also implies that the structure of your pages should not be completely different from each other—a common denominator which adjusts to the each page’s affordances should be part of your plan. 

Let’s look again at a few examples of how Etsy successfully solved this. Only this time, let’s focus on how their grids supports their different content needs and how they mix them up from page to page. In my opinion, they did a great job at keeping some sort of consistency that creates a unified impression, tying the pages together neatly. Thereby, they guide the user through the content and the user knows what to expect. Their mental map is sound and has no surprises that can derail the user experience structurally.

They created a nice rhythm for their pages and their grid looks elegant because they played it simple.

Final Thoughts

Overall, aligning content systematically is the key thing to take away from this whole topic. Nothing is more effective in tying various forms of content together than consistent grid lines. Create a strong axis that a user can follow for orientation and for guiding their eyes and actions like visual anchors. This typically results in stronger relationships that bind your work together and creates cohesion. Keep it simple! Your designs will be easier to maintain and to build upon.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.