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 justfollow 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 herebundled 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.

#web-development #javascript #coding #programming #css