Responsive grids and how to actually use them

14 min readDec 12, 2020

You looked around, you saw all the arguments on why to use a grid, how to set one up, and you’re totally on board with all of that, but nobody told you how to use one. Same.

Technically this article can be applied to grids in print but for our purposes, I’m specifically talking about web responsive grids for desktop, tablet, and mobile. Before we get into the nitty-gritty, let’s get our terminology right.

Field Elements are your blocks of design, whether that be text, image, or a combination of both. Background colors don’t really count as field elements unless they are a container for your text/image. I’ve seen the name field element be interchangeable with units, elements, parent containers — they’re all the same.

Columns are the thick colored blocks that make up the content width of your design. Field elements are to sit on a certain number of columns. Traditionally in a design system, the column width doesn’t change but the number of columns change from 12 on desktop, to 8 on tablet, and to 4 on mobile. You can literally use anything you want, but most grids have 60–80px column widths. Choosing a column width that works for you is the most important since it’s the main determinant of your content width.

Gutters are the space between the columns. 20px is a common gutter size, and this spacing will be really important when you have a masonry design or a grid of card elements, a simple example being a photo gallery. Some systems increase the gutter width as you increase in device width, but it’s also okay to keep it fixed.

Side margins also known as outside gutters are the amount of white space outside of your content width. For a more accommodating design, the side margins increase as you go up in device width. Side margins on mobile are usually 20–30px, and vary a lot between tablet and desktop. Whatever you choose as the side margin, will be the minimum white space you allow when you shrink your browser. When you expand your browser from this point, there will be more white space until the next breakpoint.

Here are some basic guidelines, in design there aren’t any hard and fast rules anyway.

1. Field elements must sit on some number of columns

The idea is that field elements must sit on some number of columns. You can split it up however you like, 6 and 6, 3 by 4, 4 by 3, whatever. In the example, I am showing a profile card sitting on different number of columns.

Profile cards with columns (left) and without columns (right).

Ok cool, so that’s easy. There will be times where you want to divide a section by a certain number, and you find that if you actually sit them perfectly on the grid they end up looking too wide. See the classic “How To” pattern below:

If we were to sit them on the grids, the text stretches too long. The optimal positioning is actually not on any of the grids at all (see below). This is okay too, as long as you understand that the whole of the element is actually an invisible, larger container.

You did actually divide the section by 3, but you also gave it invisible padding on the inside. When you hand off your designs to a developer, they should intuitively already know this, so this is more for you to understand how to actually divide things equally.

2. Do not leave field elements in the gutters

Your elements should sit within the columns and not be bleeding into the gutters. You CANNOT leave things in the gutters, that defeats the purpose of the grid.

3. It’s okay to nest elements inside fields that don’t align to the grid, as long as the parent field itself sits on columns

Now there will be moments where you want to split up your design or card exactly half-half with an image and text, in which you get this awkward situation where the image doesn’t fall on a column and the text is forced to accommodate in a weird way. Fear not, this is okay, as long as the “parent” container, or like the bigger picture of the object sits within the columns.

Profile card with the parent container sitting on six columns (left), without the highlight (middle), and without the grid (right).

4. Do not use a column as outside padding unless intentional.

All of your important content should fit in the content width, hence content width. It will feel strange at first because if you’re not used to using a grid, you will feel like the grid is the artboard, and that you need to add padding to your designs. So that’s exactly what the side margins are for, they are the extra padding to your designs. “But when the browser shrinks down, then it’ll just come neck to neck with the content width, and that’ll look weird, right?” No, that is not what happens. Depending on how it’s coded, either your content inside the grid will start to scale proportionally and the side margins will be fixed, or the side margins will scale at the same time with the content.

The designs should fill the content width (left), and not leave a column as margin (right)

So if somebody says “I need a design at 1200px width,” that does not mean your design is literally 1200px wide. That means your content width is somewhere like 960px sitting inside the artboard of 1200px so that you still have space for side margins.

5. Full bleed elements or textural graphics should go edge to edge of the artboard and is understood by bleeding out of the columns

The top image section of this page layout is full bleed.

This is an exception to rule 4 — when you have a background color or image that is full bleed. In this case, you would want to pull it outside of the grid in your mockup, and with the help of the grid and your side margins, this is understood by developers as an element being full width.

If you have an image that is meant to bleed off the page like a decoration, and you are ok with it getting cut off, that can also go off the grid.

Abstract contains their headers in the grid (left) whereas other sites like Google Flights have their headers pinned to the browser (right)

Headers and sometimes footers can have their own exceptions too, they’re not considered part of the content. Some designs have them pinned to the edges of the browsers, some like to keep it in the content width. It’s really up to you and your situation. The benefit of keeping them in your content width is that it doesn’t get crazy far when a user is viewing your site on a super wide monitor. The benefit of keeping them pinned to the browser is you have more space for navigational elements.

How These Work in Responsive

In a traditional design grid, the column widths and gutters stay the same, just the number of columns change. Why? And how does that work? This was to make things easier when you designed. If a set of three cards sat on 4 columns each on desktop, on tablet you would show two cards and wrap the third one so that it’d show on a second row. Yay! You didn’t need to do any resizing, because you already knew that it sat on four columns. On mobile the answer is easy too, you would just show one card, and the rest stacked beneath it. If you wanted, you could also get creative and choose to only show one card on mobile, or do a horizontal scroll. These breakpoints are the point of reference in code.

In reality, the web must render for any browser width. Let’s say for example you have a large monitor that sees things at 1600px wide, your desktop design is at 1200px wide, tablet is at 768px wide, and mobile is at 360px wide. So right now what you’re seeing is a design with content width of something slightly smaller than 1200px, with a ton of margin because you’re looking with a big monitor. But what happens for when your browser is one pixel smaller, at 1199px?

Fixed Grid

If your developer codes a fixed grid, when you shrink from desktop to tablet, you’ll get to the next breakpoint and there will just be lots of side margins shrinking until the next breakpoint. Text doesn’t wrap, and images don’t dynamically change. If your developer is not careful in making sure all sizes are accounted for, there could be a missed breakpoint and your designs might look cut off (hopefully this doesn’t happen). But wait as soon as you hit that 768px breakpoint, the design will snap into place, and things will look right for tablet. If you go smaller than that, the same thing will happen, your design will look the same until you reach another breakpoint.

Fluid Grid

Now comes the beauty of fluid grids! As you shrink the window, things will change dynamically, your text is wrapping, and elements are getting narrower. However, these elements of yours still won’t change layout until you hit the next breakpoint that you designed.

So what I’m trying to say is, the breakpoints that you design are just reference points at the end of the day. That’s why columns and gutters don’t change in grids, because we want to make it easy to create consistency for the designer when we need to think about the layout.

Hybrid Grids

It’s also common practice to use a combination of fluid and fixed grids in the experience. Sites usually are fluid when it goes down to mobile size because of the many different device sizes.

Some cool grid systems!

Again, you don’t have to stick to the traditional 12, 8, 4 grid, and it doesn’t even have to be 20px gutters. Below are some inspiration for cool ways to use a grid in your designs!

Invision’s Genome Project

You can see that for their design they intentionally did not use any gutters, and it looks seamless.

Not only is this site designed really well, they actually take advantage of showing their own grid system in the design to make it look even cooler. In this system there are no gutters, and there are 8 thick columns.

Dropbox Design

They have a system where there are no side margins, no gutters, and instead the page is split into two halves. The content fits within these halves and almost acts as two separate artboards.

Wordpress

The way you use the grid can be up to you. You can use it for the main section and leave out the sidebar. In Wordpress’ example, most of the content is in the center of the page and there is also a side bar on the left.

The Mockup Club

Your content and grid doesn’t always have to start in the center! For the Mockup Club, the content is off to the left.

Instagram

I’m pretty sure Instagram can get away with 6 thick columns on desktop.

Takeaway

The goal here was to provide some guidance on how to use grids in responsive design. I know for me it took me many years, and a decent amount of coding to understand how grids worked. I searched YouTube videos and read plenty of articles, but everyone focused on why it was important and less about the “rules” of how to use the grid.

The best thing you can do is to start noticing how other sites align elements on their page, and you will start to see the patterns. To help with your understanding, here are some design systems that outline their grid usage:

Google’s Material Design System

Intuit’s Design System

IBM’s Carbon Design System

…And here’s huge list of other systems you can look through

After fully understanding how grids work, I’ve become a better designer because I knew how my designs would translate between the breakpoints. I also could justify my designs more, and make them pixel perfect. Both of those led to a more consistent, cleaner design, which really elevates the end product when you have a flow that goes from screen to screen. I recommend finding a grid that works for you and your development team, and make sure that all the designers on the same team are using the grid the same way.

Thank You, Next

Now that you have a basic understanding of how to use grids, you might be wondering how to apply them to layouts you see on the web.

Part 2: Responsive grids and how to actually use them: common UI layouts