Designer’s Guide to Flexbox and Grid

What designers need to know about these transformational layout tools.

Flexbox

Flexbox, aka CSS flexible boxes, is a new layout method that gives us alignment control that no other CSS method can produce. It excels at ‘micro layout’: the ability to align, order, and distribute space among items in a container, or alter an element’s width or height to best fill the available space.

Improved Wrapping

In Responsive Web Design, the width available varies as the viewport width changes sizes. This can lead to unintended content wrapping, especially when the content is longer than designed for, or the content’s container is too narrow. We’ve probably all seen before: the design accounts for the ‘ideal’ content length, but as soon as it’s implemented and real content is added, the content wraps to the next line because there wasn’t enough space or breaks out of its container. Both are not ideal, and can cause layouts to break.

Example of improved wrapping with Flexbox

Improved Spacing & Alignment

When it comes to spacing and alignment in CSS, we’ve had to get clever to accomplish anything that wasn’t the default behavior. Even effects that seem trivial can be tricky in CSS, like vertical alignment or evenly dividing space amongst items, must rely on workarounds or hacks. Some things are downright impossible to achieve.

Example of improved space distribution with Flexbox

Source Order

Source order refers to the order in which elements are displayed on the page based on where they appear in the HTML. By default, elements will display from top to bottom and left to right by default — their width being determined by their display property.

Example of item ordering with Flexbox

Grid Layout

CSS grid layout is a two-dimensional layout system created specifically for the Web. It gives us the ability to divide the page into regions which can each be further defined in terms of size, position, and layer, resulting in an incredibly powerful native framework.

Fit for Purpose

CSS has never had a true fit for purpose layout tool, so we’ve had to get pretty inventive with how we can apply a grid to our work. Grid frameworks have emerged to fill this need, but not without introducing their own problems. Many of the most popular grid frameworks require layout definition in the markup, which can lead to code bloat, maintainability issues, and blurs the separation of document structure and presentation.

Example of Grid Layout

Next-Generation Web Layouts

When it comes to layout, we’ve been stuck in a rut for quite a while. Established patterns and the limitations of previous layout tools in CSS have led us down the path of layout homogeneity in the past. You don’t have to go far on the Web to spot it: header, main content, sidebar, footer.

A Word of Caution

It’s important to note that not all browsers support flexbox and grid features. We must take into consideration who our audience is for each project and determine if the majority of users will benefit from these more advanced features, while providing a sensible fallback for non-supporting browsers. It’s perfectly acceptable to provide users in legacy browsers with a simplified version of your UI, and enhancing it for users in newer browsers.

There’s More. A lot more.

We’ve only scratched the surface of what flexbox and grid can do. Luckily, there’s lots of great documentation available that touch on the capabilities of these new layout tools. Here’s some of my favorites:

Flexbox

Grid

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jon Yablonski

Building a dramatically more accessible world as Senior Product Designer at Boom Supersonic. Creator of Laws of UX / Humane by Design • https://jonyablonski.com