Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Responsive Grids

If you’ve taken our Advanced Layout course, you probably remember the term “grids”. The grids we cover can be categorized as “design grids” because they are screen size specific. In other words, they are static.

In this lesson, we will talk more about responsive grids. As the name suggests, it is not so static.

First of all, let’s do a little refresher of grid terminology.

This is what a desktop grid usually looks like. We can see that there are 12 semi-transparent red bars that make up the grid. They are called columns.

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, 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.

In most design programs, designers specify the left and right margin of the page first and then the size of the gutter. The computer then automatically calculates the width of the column for us.

Now, of course, this is a great opportunity to do a refresher on the term gutter and margin.

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.

Margins 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. A common desktop margin may be anywhere between 80px – 120px, but again, it depends on the actual size of the canvas you are working with. For tablet, it is common to have 40px-60px in margin on each side.

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.

The grid helps us place elements in a nice and organized way. We can use the grid to create columns to place different design elements and align them with the grid as a guideline. You can turn on and off the grid as you need when you design. Think of it as a guide and not a bounding box.

The design elements we mention can include anything. For example, a block of text, a photo, a card design consisting of text, photo and buttons, a video etc. We call them field elements.

Background colors don’t really count as field elements unless they are a container for your text/image.

Now that we are up to speed with grid terminology, let’s look at best practices when using the grid to design.

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, or 4 by 3.

https://miro.medium.com/max/2560/1*Pk2VauRO-tQJnpHXiOFpbA.png

https://miro.medium.com/max/2560/1*7q2M49vbXa2Ls770H__rLQ.png

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 here:

https://miro.medium.com/max/2560/1*Ri0zAQzg1AcPxijhlN2lvA.png

https://miro.medium.com/max/2560/1*Zh0L5vXpYFyPRxaiwuqh5A.png

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. This is okay too, as long as you understand that the whole of the element is actually an invisible, larger container.

https://miro.medium.com/max/2560/1*fmvmDzIImwghXvv0QrIUkQ.png

https://miro.medium.com/max/2560/1*xNba7mzB8C03toOWsJC0cw.png

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

https://miro.medium.com/max/2560/1*YOWN0yHnIZkGKYXkJDsmYA.png

https://miro.medium.com/max/2560/1*77GuaZ3xn6ntcw1lrWrUZQ.png

Your elements should sit within the columns and not be bleeding into the gutters. You should not leave things in the gutters, which 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.

https://miro.medium.com/max/1504/1*peiew0MbQ-Ln0uA51bCPhg.png

https://miro.medium.com/max/1504/1*JpdaD1_dr4C9Rb61L3ax-A.png

https://miro.medium.com/max/1504/1*uyj2WoAVx8Bn-ThtaXpqhQ.png

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

All of your important content should fit in the content width. Remember, margins are supposed to be free of any important content. Do not use the left most and right most column as additional margin. If your margin feels small, you should change the margin accordingly.

https://miro.medium.com/max/2172/1*u3X2D61qSyFucHdIWngQ4w.png

https://miro.medium.com/max/2168/1*ObCZoQnzO7hblT-SU_kd5Q.png

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

https://miro.medium.com/max/1400/1*_-1qozzDnDpE3jp4DCPbkw.png

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.

https://miro.medium.com/max/2472/1*q8bmgjDGTN6UxKQjN7WcGA.png

https://miro.medium.com/max/2472/1*CvX5aJfUPpZE6QRtYt4h7g.png

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.

https://miro.medium.com/max/2880/1*4BPLNZHBFHsgYJManCLCrg.png

https://miro.medium.com/max/2880/1*fgvzngzMV1xQPSBzisgiFw.png

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 too 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

https://miro.medium.com/max/1200/1*TeB8xjfr62WTm4yrW6EN3w.gif

https://miro.medium.com/max/1400/1*-Ok0YwQNQyCY9qDl7vKt6w.png

In a traditional design grid, the column widths and gutters stay the same, just the number of columns change. 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. 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

https://miro.medium.com/max/1920/1*Nt0jOP6wO6-AikTuEVJULw.gif

https://miro.medium.com/max/1488/1*1hXSGmf7n8Xy6Aca83Y-MA.gif

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

https://miro.medium.com/max/1920/1*RArFlOZ5GZsI8C_FGTaxYg.gif

https://miro.medium.com/max/1920/1*j4zvc40wUy8bXK3whf_qNg.gif

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.

Breakpoints 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.

As designers, while we don’t need to make the responsive behavior actually happen, which is the job of the developer, we need to understand how it could work for our design. We need to adopt the mindset of a director and collaboration of developers – letting them know what our vision is and provide what they need to make it happen in code.

Scroll to Top