Flexbox vs CSS Grid

Published in

Turo Engineering

6 min readFeb 5, 2018

You’re a software engineer that is interested in responsive, easy to build layout tools. You’ve heard of, and maybe used, both Flexbox and CSS Grids, but you are still scratching your head over the when/where/why? Is CSS Grids the new Flexbox? Is there yet another thing I have to learn (and a thing to forget)? It feels like Flexbox just got here. And I was just starting to understand ordering…

Well, I am here to explain at a top level the difference between the two. Saving you seconds, no, minutes(!) of your precious time (hopefully 😉).

Let’s start with the history of this problem…

Layouts are the skeleton of every web page.

The rise of mobile browsing ushered in a new problem for designers and web developers alike:

A single page must now be equipped to handle at least 4–6 different breakpoints and 2–3 layouts, at a minimum. Either that or center all of your content forever for the most snooze-inducing layout of all time…

At Turo, our pages often need responsive layouts.

Differing desktop, tablet and mobile layouts for the same page for Turo.

In the past, the developer toolbox looked like this:

Floats — A bit hacky, unpredictable, hard to manage as a 2-dimensional grid.
Tables — Too rigid, not responsive, not pretty, but they did solve some tricky moments if you took the time.
Positioning — Also too specific and rigid, not adaptable to fluid layouts.

These are fine and they work, but in more complex or responsive layouts they can be limiting and frustrating. Heck, they can be frustrating in simple layouts as well.

Enter Flexbox and CSS Grids

Both are relatively new tools that were introduced to CSS Specification to better address complex layout problems.

They unlock new possibilities to old problems, enable things that weren’t possible before, and solve real problems we face with responsive web development e’eryday.

Flexbox = Flexible + Box

Compatibility

Released: Old version 2009, current version 2012.

✅ While Flexbox does have known and well-documented bugs, it is basically production ready as long as you support IE11 and up.

Flexbox: One Dimensional

When you think of Flexbox you should think of scenarios when you are building a one-dimensional layout. For example, if you need a row with some columns in it. Sure with Flexbox you can create a bunch of rows with columns but those columns have no knowledge or relationship to each other (we’ll cover that more when we get to Grids). What I mean is Flexbox excels at the ‘micro layout’: alignment, ordering, wrapping, and distributing space among items in a single container.

Helps solve layout problems that are historically tricky:

Vertically centering a block of content inside its parent.
Making all the children of a container take up an equal amount of the available width/height, regardless of how much width/height is available.
Making all columns in a multi-column layout adopt the same height even if they contain a different amount of content.
Altering an element’s width or height to best fill the available space.

CSS Grids

Compatibility

Released: March 2017, released on Edge Oct 2017.

🚫 While CSS Grids has been implemented at an astonishing rate, it’s not perfect, and not fully supported. Depending on what browser versions you support, it may still be a bit out of reach. More on that shortly.

CSS Grid️: Two Dimensional

Excels at dividing a page into major regions, or defining the relationship in terms of size, position, and layer, between HTML elements.

Making whole page layouts.
Like tables, grid layout enables you to align elements into columns and rows in relation to each other. It’s better than Flexbox in that regard, even just considering layout performance reasons.
Making literal grids.
Like X columns with Y gap between them, homegrown framework stuff.
Minimizing media query intervention with really powerful functionality.
A grid container’s child elements can position themselves so they actually overlap and layer, similar to CSS positioned elements.

Layering items, white space, complex grid configurations, while maintaining performant fluid layouts … all made miles easier with CSS Grids.

As I am a visual learner, I found this list of grid layout examples to be riveting. This is powerful stuff, so…Does CSS Grid replace Flexbox?

NO… but there are a few important take-aways:

Flexbox is essentially for laying out items in a single dimension — in a row OR a column.
CSS Grid is for the layout of items in two dimensions — rows AND columns that need to relate to one another.

… they can even be used in tandem!

CSS Grids: So when can I use it?!

CSS Grid in Production involves compromise

Browser adoption of Grid is not like any browser adoption of CSS we have seen before. The implementations are highly interoperable already. Browsers without support are going away much faster than history would have us expect. However…

Interoperability

“It’s not your fault, but it is your problem”

CSS Grid should be used in the right place, at the right time. Trade-offs will need to be made:

Present a simplified layout for older browsers.
Use it in high impact areas.

Finale, finally

With past tools, there were various limitations when it came to layout in CSS. Development required compromising on design so that it worked as expected in development. Or relying on Javascript to implement the behavior we needed. But this is future-times:

Box-based position tools, Flexbox, and CSS Grid can all work together

Making it easier to incorporate a Grid layout into a specific part of your website if you need it. Use CSS Grids as an enhancement, for specialty pages; and making very intuitive, responsive, design possible.

Next-Generation Web Layouts

The arrival of Flexbox and CSS Grid signal a new era of layout on the Web. We must adopt a new mindset when it comes to layout in order to remain free of the habits, drawbacks, and hacks of the past. Let’s embrace these new tools and renew our exploration for what’s possible with layout on the Web.