Member-only story
Responsive grids and how to actually use them
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…