Member-only story

Responsive grids and how to actually use them

Christie Tang
UX Collective
Published in
11 min readApr 18, 2019

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.

The purple parts are the field elements

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…

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Written by Christie Tang

Product Designer at Meta. Jury at Awwwards. eSports enthusiast. Bonafide nerd. Ketogenic foodie. Sarcastic and crass INTJ. Design casually explained.

Responses (65)

What are your thoughts?

One of the best grid articles read so far

Hi Christine, Thank you so much for writing. This has been one of the hardest concepts for me to understand as a new designer and I think you did a fantastic job of breaking it down.
Cheers,
Jesse

Hello,I learned a lot from your article about responsive grids.The article is very good. Can I translate your article into Chinese and share it with my friends? I will attach the original author and the original link.thank you .