So which one is better? Grid or Flex? When to use which? What are the differences?

All diagrams were taken from my CSS Visual Dictionary book.

You can get it here bundled together with JavaScript Grammar.

Or you can just follow me on Twitter where I share more of my tutorials.

For me, I see both as fundamentally different ways of thinking about layout design. I don't think of one as better or worse than the other. It is common to use them together.

This is not a comprehensive study. Just the key differences and similarities I've found.

There may even be some mistakes I overlooked (let me know if you find any).

My goal is not to say whether one is better than the other. Instead, it's to help someone who is just starting out get some perspective on general use cases for both Flexbox and Grid.

Different Layout Models

Grid and flex follow different layout models.

Grid has column and row templates with assumed "ghost" items.

Flex is not designed to make grids. It is based around the idea of a flex line and direction. However, flex can still handle row and column using wrap:

Note: without flex-wrap: wrap flex would still render on a single line.

Grid is defined by grid-template-rows and grid-template-columns.

Grid assumes "ghost" placeholders for missing items (HTML elements).

Generally flex is not used to create grids but to align rows and columns.

But, to simulate a grid with flex you would have to set the flex-wrap property to wrap.

Grid gaps and lines vs. Flex lines

Grid has gaps and lines. Flex has flex lines but they are used in a different context.

Flex gives you only one flex line defining overall item direction. It is determined by flex-direction property set to row or column. There is a main (x) axis and cross-axis (y). flex-start and flex-end can change depending on flex-direction.

Grid allows you to change gap size. But you can't change size of individual gaps per dimension: once gap size is set with grid-row-gap all row gaps must be that size. Same goes for grid-column-gap.

To set all gap sizes at the same time you would use the grid-gap short hand.

Cells, Items and Content

When working with both flex and grid models it's important to understand the difference between cells, items and content.

Both Can Change Flow Direction

Both flex and grid can change flow direction of items.

By default grid-auto-flow and flex-direction are set to row:

Changing Direction Flow To Column

Here I also increased number of items in flex just to see how it works.

Same example as above, except with direction flow changed to column:

Another Minor Distinction

Let's take a look at actual render of the grid with all 9 items.

Grid adheres to size of the cell, but content will bleed (overlap) without resize.

Flex items pack as close together as possible and will resize to match content.

Notice how inner content of grid does not resize the cell. Flex content does.

something

In this flex example some margin was added to content. It's still densely packed.

something

What Are The Similarities?

They both do pretty much the same things when it comes to inner item align. Some properties even have exactly the same names (adjust-content and adjust-items for example serve exactly the same purpose of aligning inner content and/or items.)

Multi-directional float in Flex and Grid

I remember the time when we just used the float CSS property to "float" elements. And it only worked horizontally! Thankfully those days are long gone. Here's the 360 setup:

The justify-self and align-self properties work in exactly the same way in both.

If so many properties produce the same exact results in flex and grid, wha
t is the difference? Basically there are three ways of thinking about aligning items.

See below.

Justify and Align

Sometimes things won't align as expected. This is because different align properties are tailored for specific situations.

This diagram explains the relationship between the different justify and align properties.

  1. -content based properties justify and align the content bulk.
  2. -self properties justify and align individual items.
  3. -items properties justify and align all items in the container.

Conclusion

  1. Learn the distinction between container, items, content and self.
  2. Both grid and flex can flow in direction of row (default) and column.
  3. Grid can span across multiple rows and columns. Flex cannot.
  4. Items and their inner content align is exactly the same in flex and grid.
  5. Grid has templates, gaps and lines. Flex has lines and non-default wrap.
  6. Flex can be used to create grid-like layouts using an explicit item width and wrap.
  7. Use grid for mapping out a responsive layout for larger layout areas.
  8. You can use grid with flex items. Or flex with flex items.
  9. With grid you can create responsive layouts without media queries if you learn how to use fr units together with min-max.
  10. It is possible to use media queries with flex too, not just the grid.
  11. You can still use flex-only layouts – items can also be flex containers.
  12. In performance tests flex usually renders faster than grid. But if you're already good at grid I wouldn't worry about switching unless there is a good reason.

More Grid And Flex Tutorials

If you want to take a super detailed look at Flex or Grid in isolation:

  1. The Ultimate Guide to Flex
  2. The Ultimate Guide to Grid

Want To See All CSS Properties Explained Visually?

All diagrams were taken from my CSS Visual Dictionary book.

You can get it here bundled together with JavaScript Grammar.

Or you can just follow me on Twitter where I share more of my tutorials.