A UI designer’s primer on responsive grids
How grid technologies such as Flexbox and CSS grid work, and how to incorporate them into your designs
Design grids and responsive grids are used for the same basic principle: to add balance, order, and visual harmony to our layouts.
The grids we use today as designers are characterized by equal-width columnar layouts sized by multiples of a baseline grid, usually the 8-point grid, to which content and UI elements are scaled and positioned.
Most responsive grid frameworks utilize a similar columnar scheme (such as Bootstrap’s 12-column layout). The difference between design grids and responsive grids lives in the mechanics. Rather than being fixed to a baseline grid, responsive grids are fluid, and grid columns can scale and reorient with the user’s viewport. Unlike design grids, most responsive grid sections don’t guide content, but instead contain content, an important distinction.
Since grids on the web are effectively sections of content themselves, we have a lot of freedom around where we might want to deploy responsive grids in our UI and where we don’t. For example, take a look at the approach used in Google Calendar. The app makes appropriate use of responsive grids for content, but maintains the placement of higher-level UI outside of the grid:
In this example, a responsive grid is used to represent calendar, but global UI elements remain static and maintain their position relative to the viewport. This is to reinforce the predictability of important UI elements such as navigation, calendar filters, and app menu.
There is certainly a lot we can do with responsive grids, but we have to understand how they work to deploy them correctly.
An introduction to Flexbox-based grids and CSS grid
If you’ve worked with web design for any period of time, you’ve likely heard of Bootstrap. Bootstrap, and many frameworks like it, use a Flexbox-based grid system to position content. This 12-column grid system is easy to use, has a familiar layout scheme divisible by 12, 6, 4, 3, 2, and 1, and it provides developers with a mobile-first experience out-of-the-box. Flexbox is also well-supported by browsers. For these reasons, Flexbox has become the de facto technology for creating responsive grids.
Flexbox is fantastic for aligning elements in a single direction along this 12-column scheme. Bootstrap grids (and most Flexbox grids, frankly) are built by placing sections of content into columns. These columns of content live inside of rows. Columns have certain properties which define how much space they take up relative to their parent container, and define breakpoints for mobile, tablet, and desktop displays. For example, a div with the property “col-8” will take up 8 of 12 available grid spaces. Columns can also be sized to the natural width of their content, or fill the remaining space in a row.
Design grids and Flexbox-based grids differ in many ways, but they chiefly diverge in how content is treated. Since Flexbox is great at aligning elements in a single direciton, Flexbox grids are usually created by placing sections of content (columns) into rows which run the length of their container. This means that grid cells effectively contain content. Compare this with design grid columns, which guide the placement of content, rather than containing it. This limits how sections of content can be displayed because they are bound to their container.
Since Flexbox grids are effectively rows containing columns, columns in different rows have no knowledge of each other. This means that these sections can operate independently, and it’s very easy to get into a situation where your page is decidedly “off grid” depending on the Flexbox layout.
CSS-grids (‘grid layout’)
CSS grid provides developers with a wealth of functional advantages over Flexbox-based grids. It allows you to control layout in two directions, versus a single direction like Flexbox. You also have more control over how your grid is presented because with CSS grid you’re placing content across a canvas versus within the confines of HTML elements. You can also size and position columns and rows with a lot more freedom than you can with Flexbox frameworks like Bootstrap, where you’re pretty much limited to the equal-width 12-column layout.
As a technology, you can think of CSS grid as great for organizing the big picture for the page. Flexbox is better at aligning information within a single area of content.
The downside is that CSS grid layout is not as well-supported by browsers as Flexbox, and so it’s rare to find pages that use it. No popular framework currently makes use of CSS grid (circa November, 2018).
As I mentioned, CSS grid works by placement of HTML elements along a defined grid. You then assign individual element layouts to those grids and rows. See the example below.
//How the above layout could be created using CSS grid template.wrapper {
display: grid;
grid-gap: 16px;
grid-template-columns: 25vw 25vw 25vw 25vw;
grid-template-areas: "a" "b" "c" "d" "e"grid-template-areas:
"a a b b"
"a a c d"
"e e e e"
}
Designing with responsive grids
Use responsive grids to showcase user content
The most important piece of content on a user’s interface is their content, and responsive grids are great at adding order and balance to content. As with the Google Calendar example, grids can be used to show more user data or less depending on the user’s viewport.
Take a look at another example from Muzli, which uses a responsive grid to tile a user’s story content:
As the viewport grows and shrinks, the user’s story content grows and shrinks with it. Tiles scale with the width of the browser, a 5-column layout is replaced with a 4-column layout, and so on. But important UI elements, such as the menu at the left, and the nav bar at the top, remain consistent and unchanged.
Maintain important UI regions outside of the grid
There are very good reasons to maintain important UI elements outside of the grid. For one, it is good practice to keep UI predictable and unchanging, where the user’s content may change frequently. Depending on your project, it might be a good idea to keep regions of UI such as navigation, menu regions, etc. outside of the responsive grid.
Google calls these sections of important UI “permanent UI regions” or “persistent UI regions” and provides guidance on how these interplay with with the grid.
Some may cry foul at the notion that certain content is within a responsive grid, and some outside a grid. I’ve heard this argument from adherents of “hard grids” who claim everything should align to the baseline grid. But as we’ve seen, the responsive web doesn’t work this way: UI elements frequently go “off grid” by definition of a hard grid as the viewport is sized.
“When it comes time to code up an interface, using an actual grid is irrelevant because programming languages don’t use that kind of grid structure — it’ll just get thrown away.” — Spec.fm
Resources and further reading
Material design’s guide to designing with responsive grids. A great introduction to how grids should be used and where.
Bootstraps’ grid system. Further reading on their Flexbox-based 12-column grid scheme.
Spec’s guide to the 8-point grid. An in-depth guide to the 8-point baseline grid and why you might want to use soft grids or hard grids.
