Flex vs Grid 2020

So which one is better? Grid or Flex? When to use which? What are the differences? For me, I see both as fundamentally different ways of thinking about layout design. I don’t think one as better or worse than the other. It is common to use them together.

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

Image for post
Image for post

This is not a comprehensive study. Just key differences I found.

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

All diagrams were taken from my CSS Visual Dictionary book.

You can get it here bundled together with JavaScript Grammar.

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 handles row and column using wrap:

Image for post
Image for post

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

Image for post
Image for post

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 grid with flex you would have to set flex-wrap property to wrap.

Grid gaps and lines vs. Flex lines

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

Image for post
Image for post

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

Both Can Change Flow Direction

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

Image for post
Image for post
Image for post
Image for post

Changing Direction Flow To Column

Image for post
Image for post

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

Image for post
Image for post

Another Minor Distinction

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.

Image for post
Image for post
Image for post
Image for post

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

What Are The Similarities?

Multi-directional float in Flex and Grid

Image for post
Image for post
Image for post
Image for post

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, what is the difference? Basically there are 3 ways of thinking about aligning items.

See below.

Justify and Align

This diagram explains relationship between justify and align properties.

Image for post
Image for post
  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. Both grid and flex can flow in direction of row (default) and column.
  2. Grid can span across multiple rows and columns. Flex cannot.
  3. Item and their inner content align is exactly the same in flex and grid.
  4. Grid has templates, gaps and lines. Flex has lines and non-default wrap.
  5. Flex can create grid-like layouts with explicit item width and wrap.
  6. Use grid for mapping out responsive layout for largest layout areas.
  7. You can use grid with flex items. Or flex with flex items.
  8. Note: with grid you can avoid media queries for creating responsive layouts if you learn how to use fr units together with min-max.
  9. It is possible to use media queries with flex too, not just the grid.
  10. You can still use flex-only layouts — items can also be flex containers.
  11. 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.
  12. Grid can create responsive layouts without media queries.

More Grid And Flex Tutorials

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

Want To See All CSS Properties Explained Visually?

  1. You can get it here bundled together with JavaScript Grammar.
  2. Or you can just follow me on Twitter where I share more of my tutorials.

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary https://amzn.to/2JMWQP3 few others…

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