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.

You can get it here bundled together with JavaScript Grammar.

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.