Should you use Flex or Grid? Yes!

Wait, what?

To think about this properly, we need to reframe the question. Instead of asking, "which is best?" try, "when should I use flex or grid?"

No one layout mode is better than the other. While there is some overlap between what Flex and Grid can do, they are designed to solve different layout problems. As with any tool, you must reach for the right tool for the job.

In this post, I will highlight what Flexbox is best at, what Grid is best at, the overlap between these tools, and how to pick the best one for your use case.

Flexbox

A short history about Flexbox

The CSS Working Group first discussed the idea of Flexbox sometime before 2008 and published the first public draft in 2009, but it wasn't until 2016 that Flexbox reached maturity.

In their blog post, "Flexbox is Dead, Long Live Flexbox!" Tab Atkins explains that "the original spec was too close of a direct translation from XUL." XUL was Mozilla's proprietary UI building language.

Due to the conflict with Mozilla's proprietary language, Tab rewrote the spec and published four working drafts throughout 2011 and 2012.

Towards the end of 2012, the spec reached W3C candidate recommendation. This means the spec is stable and supported in browsers, and there should not be a significant change from this version.

But, the committee now in charge of Flexbox still had performance and efficiency improvements to make. So between 2014 and 2015, there were three more working drafts. Finally, the spec once again reached candidate recommendation in early 2016. This is the Flexbox we know and love today.

I covered this history in detail to help bring some context to the discussion surrounding layout in CSS. The path to get here was long and windy. So windy, many developers were reluctant to adopt Flexbox in case it changed again. For this reason, it would be many years until Flexbox became commonplace. Around that time, Grid entered the scene and confused matters further.

CSS's first layout mode intended for designing UIs

Flex and Grid are not the only layout modes! There's flow (aka the default layout mode), tables, floats, multi-column, and the list goes on. There are many different options, and it's all about picking the best one for your use case.

"Flex layout … is designed for laying out more complex applications and webpages." – W3C Flexbox spec

Flexbox was what the web needed, but because it was the first tool of it's kind, developers misunderstood and misused it from time to time. Many layout problems would be better solved with Grid but are hacked together with Flex instead.

The law of the instrument is a cognitive bias that involves an over-reliance on a familiar tool. This perfectly describes most web developers' relationship with Flexbox.

"If the only tool you have is a hammer, it is tempting to treat everything as if it were a nail"
– A. Maslow

You might think there's no need to learn Grid when you know Flex because they are basically the same.

Ehhh, no, not really. It's important to remember that there will never be one layout mode to rule them all. They all exist for a reason.

When to use Flexbox

In this section let's look at some common uses for Flexbox:

Distributed navigation

An example distributed navigation:

Split navigation

An example split navigation:

Centring an element

An example of centring an element:

An example of a card layout pushing footer down:

Media objects

An example of media objects:

Form controls

An example of form controls:

Grid

Wait, does this replace Flexbox?

No! Not at all, they both have their use cases, and they work wonderfully together!

Grid is often seen as the replacement of Flexbox or "Flex 2.0" when it's really another tool for us to utilize.

Web browser developers wrote the specifications for Flex and Grid around the same time, but their journeys from spec to implementation were very different.

Grid makes so many layouts that used to be near impossible a lot simpler.

When to use Grid

Responsive 1-3 column holy grail layout

RAM (Repeat, Auto, Minmax)

https://codepen.io/rachelandrew/pen/GZQYOL

Different sized grid items

https://codepen.io/rachelandrew/pen/QKwvxJ

Overlapping elements

Subgrid (coming soon)

Subgrid Only supported in Gecko (Firefox) and WebKit (Safari), currently in development for Blink/Chromium (Chrome/Edge/Opera/Samsung/etc.):

Masonry layout (coming not so soon)

Masonry layout only supported in Gecko (Firefox) behind a flag.

How to think about the difference between Flexbox and Grid

One-dimensional versus two-dimensional layout

Flexbox lays out it’s elements in either a row or a column, not both. You can fake it, and get something that looks like a Grid with Flexbox but the Flexbox algorithm doesn’t know about the second dimension.

Grid positions its elements based on both it’s rows and columns.

Content first (intrinsic) or layout first (extrinsic)?

Use Grid when you already have the layout structure in mind, and Flexbox when you aren’t as worried about the layout and just want everything to fit.

Flexbox will listen to it’s content, so it’s content first (intrinsic).

Intended layout
Doesn't look like it's changed (it has)
Woah, what the?!
Oh boy, what in the world is going on?!?

Grid will stick to it’s rows and columns no matter what, so it’s layout first or extrinsic.

Intended layout
Doesn't look like it's changed (it has)
Never changing these columns
Uh oh, we’ve got some overflow

If you want you can even make the layout so rigid that it stays exactly the same, though you probably don’t actually want this.

Layout mode cheat sheet

A CSS layout mode, sometimes called layout, is an algorithm that determines the position and size of boxes based on the way they interact with their sibling and ancestor boxes. There are several of them:

  • Flexbox The children of a flex container can be laid out in a column or a row and will automatically flex their size, either growing to fill unused space or shrinking to avoid overflowing the parent. Horizontal and vertical alignment can easily be set, making Flexbox ideal for centring elements and form controls.
  • Grid The children of a grid container are laid out in rows and columns that can be easily defined. This is best when you have a structured layout in mind, for example responsive 1-3 column holy grail layout.
  • Multi column The children of a multi column container are laid out in columns. It's ideal when you have lots of text you need to break into multiple columns.
  • Table layout is best designed for presenting tabular data like a spreadsheet.
  • Flow layout is the default layout mode for most elements. Once something is taken out of "flow" it works independently
  • Floats are best for placing media within text and making the text wrap around it - like an image in an article
  • Positioned Elements can be positioned relative to itself, relative it’s containing block, or relative the viewport. This can be used to position the navigation to be fixed to the top or position a chat window in the bottom corner.

⚠️ Developers used to push table and float to the limit to layout pages. This is now considered a bad practice, as you should use the best layout mode for the job, reserving table and float for what they were originally designed to do.

The verdict

Layout is the bedrock of CSS. Different layout modes are useful in different circumstances. There's no silver bullet answer to the question of which one you should use.

The most important thing is to know is that they all have their use cases. Take your time to learn about them all, so that you can use the right tool for each situation.

And remember, it’s okay if you can’t remember all this right away. This article isn’t going anywhere, so feel free to come back and use this as a reference when you’re trying to make this tricky decision. We’re here to help!

There is an overwhelming amount of resources available online for learning more about layout. If you're interested in learning more check out Scrimba's Learn Flexbox for free or Learn CSS Grid for free courses, or check out How not to struggle with CSS, with Kevin Powell on the Scrimba Podcast. And lastly, if you're looking for something more comprehensive checkout Kevin Powell's awesome Learn Responsive Web Design course on Scrimba.