CSS Flex vs Grid Tutorial
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.
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.
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 handles 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 grid with flex you would have to set 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.
In this flex example some margin was added to content. It’s still densely packed.
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:
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.
Justify and Align
Sometimes things won’t align as expected. This is because different align properties are tailored for specific situations.
This diagram explains relationship between justify and align properties.
- -content based properties justify and align the content bulk.
- -self properties justify and align individual items.
- -items properties justify and align all items in the container.
- Learn distinction between container, items, content and self.
- Both grid and flex can flow in direction of row (default) and column.
- Grid can span across multiple rows and columns. Flex cannot.
- Item and their inner content align is exactly the same in flex and grid.
- Grid has templates, gaps and lines. Flex has lines and non-default wrap.
- Flex can create grid-like layouts with explicit item width and wrap.
- Use grid for mapping out responsive layout for largest layout areas.
- You can use grid with flex items. Or flex with flex items.
- Note: with grid you can avoid media queries for creating responsive layouts if you learn how to use fr units together with min-max.
- It is possible to use media queries with flex too, not just the grid.
- You can still use flex-only layouts — items can also be flex containers.
- 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.
- 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: