Flexbox vs CSS Grid is Not A Thing

That’s right. There is NO flexbox vs CSS Grid. It’s just flexbox and CSS grid.

You don’t have to choose which layout system you should stick to. In coding, sometimes it’s good to choose one paradigm or methodology over the others and be consistent with it. This is advantageous in many ways , especially if you’re working in a team.

But, that’s not the case here. Here’s why…

Flexbox and CSS grid both should be used in conjunction. Although one can be substituted for the other, and any functionality can be achieved in either of them (well, mostly), it is good to use both of them.

Flexbox works in a single axis and has a cross-axis that makes it workable in 2-dimensional structure. But the point to note here is that is it’s conceptually one-dimensional. So it’s brilliant for working with headers, navigation bars and other components that are in one dimension only.

CSS grid provides a grid layout. So it seems natural to use it where you have multiple images, or card-like components stacked in a grid-like structure.

By choosing either of them for all purposes, you force yourself to think of a row as a grid or a grid as two separate dimensions.

The easiest way for you to create beautiful and optimal code is to think of the most natural solution and then force the computer to think like you. It has the added benefit that if you were to read up code that you wrote a long time ago, it will be on your fingertips since natural solutions don’t need explanation.