Understanding the Grid

Understanding the grid and how to design with it

Nowadays, most websites are built to a grid, either with or without a framework (such as Bootstrap). The grid provides a structure to build upon; this enables the designer to work within certain limitations (unlike, say Print design) and to be consistent in their work.

Consistency is an important aspect of web design as it makes it easier (especially for inexperienced users) to gain familiarity with a website and in turn carry out tasks on the website. The more user interaction is required with the website the higher importance of this consistency. The goal is to create a predictable user experience so the user can carry out their tasks with little to no instruction.

When I mention consistency, I understand that certain aspects of design are in fact the opposite to that. Certain inconsistencies and nuances may turn a good design into a great design, but here I’m talking only about the structure. So back to the grid, what is there to understand and why is it important?

A standard grid is usually 12 columns wide. It can be any amount of columns but 12 is divisible by 1, 2, 3, 4 & 6 so it gives us a lot of options.

grid

So if the size of the content on the webpage is 1170px (the area inside the grey border) that means:

If the size of the page, the number of columns or the gutter width changes then so will the other calculations. If you want to understand a little more about this then I suggest looking at the Grid Calculator.

Bare in mind that these are the sizes at full width. Once the browser window goes below 1170px then all of these numbers are going to shrink down. The sizes for the columns are based on percentages so they will shrink down accordingly whereas the gutters and margins will stay the same.

So you’ve got this far, the next stage is to actually design your website to the grid. I’ve often seen a grid being used, but not used properly so here’s some does and don’ts,

Example 1

grid-simple

This first example is a pretty standard example of using the grid. The sidebar (the blue area) takes up the first 3 columns, the next column is blank for a bit of space and the main content (they grey area) covers 8 columns. Absolutely fine, no problems here.

Example 2

grid-over-lines

This example is fine too. Although the sidebar (the blue area) is not ‘snapped’ to the grid, it is within the confines of it. Similarly with the main content (the grey area). The sidebar would be the first 4 columns (but with some padding on the right hand side) and the grey area would be 8 columns with padding on the left hand side. Again, fine. Nothing everything has to be snapped to the grid, so there is flexibility – it just needs to work within the confines of it, something the next two examples fail to do.

Example 3

grid-margin

In this example the sidebar clearly covers the outer margin. The margin is there to prevent the content being hard up against the side of the page. If you want design elements to be included in this area that’s fine, do it outside the grid, but not the content.

Example 4

grid-double-wrong

I’d hope by now you’d be able to spot the problems with the above. There are two. The first is that the sidebar (the blue area) is actually in the gutter to the right hand side of the 3rd column. This could be overcome by a developer by making the first four columns available for the sidebar and add some padding, but really it’s encroaching on the gutter, there’s no need. The main content (the grey area) is also covering the outer margin on the right hand side, similar to example 3.

So, there’s a quick rundown of the grid and how to design to it. The grid has been around for years now but it’s still something that designers are failing to grasp. This is understandable coming from other mediums of design but as a designer, or a company, I feel it’s really important to know how to design for the web and the grid is a great place to start.

Work with me on your project Get started