CSS Flex vs Grid

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.

Here’s a list of my best web development tutorials.

Different Layout Models

Grid and flex follow different layout models.

Grid gaps and lines vs. Flex lines

Grid has gaps and lines.

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.

Changing Direction Flow To Column

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

Another Minor Distinction

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

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 times when we just used float CSS property to “float” elements. It only worked horizontally! Thankfully those days are long gone. Here’s the 360 setup:

Justify and Align

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

  1. -self properties justify and align individual items.
  2. -items properties justify and align all items in the container.

Conclusion

  1. Learn 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. Item 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 create grid-like layouts with explicit item width and wrap.
  7. Use grid for mapping out responsive layout for largest layout areas.
  8. You can use grid with flex items. Or flex with flex items.
  9. Note: with grid you can avoid media queries for creating responsive layouts 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.
  13. Grid can create responsive layouts without media queries.

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 Grid
  2. Simple CSS Animation Tutorial

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