Flexbox and CSS Grid - "The Dream Team"

If right run a search for "CSS Grid and Flexbox," you'll find mostly articles or videos with the title "CSS Grid VS Flexbox". These articles and videos assume one is better than the other. However, the truth is that both are great and one isn't better than the other.

In this article, I'm gonna show you what both are capable of, things that make them different, and why you should use them together to make your web page look amazing.

Similarities

Both Flexbox and CSS Grid are tools to make the layout of your page better so that it looks amazing. Furthermore, using them is simple and allows you to control the way your page looks easily.

Both have similar functions to do certain things on your pages such as justifying content and vertical alignment but at the same time, they do some other things differently like what's in the next segment.

Differences

When we talk about Flexbox and CSS Grid there is a major difference.

While CSS Grid works on 2 dimensions Flexbox does it in only one but that does not mean that CSS Grid is better than Flexbox. That just means that they work differently. To understand this better, here we have some images that better explain the way each of them works.

Above is a diagram showing how Flexbox works.

Above is a diagram showing how CSS Grid works.

Finally, above is a diagram showing Flexbox and CSS Grid working side by side.

As you can see, Flexbox works one line at a time and when it gets to the end of the page it wraps and continues onto the next one while CSS Grid works on two dimensions meaning that you can use the space vertically and horizontally as you need it.

So... why use them together?

I like to see Flexbox and CSS Grid as friends and not as enemies since you can use them at the same time and when you do so, your page is going to end up looking amazing.

If you analyze most of the pages out there you'll see that if you want to recreate them using only one of these tools is really difficult or even impossible. Therefore, why use one when you can use both and have amazing results?

The best thing you can do is use both as you need them by section. If there is one section that you think will look better using Flexbox, then use it and vice versa. Use all of the resources they offer and make an amazing page using Flexbox and CSS Grid AKA "The Dream Team".