The difference between Flexbox and CSS Grid?

What's the basic difference between CSS Grid Layout and CSS Flexbox?

Did you find this post useful? Show some love!

To make it VERY short: Flex box is for one-dimensional layout (Single rows or single columns) that may or may not wrap. Grid is for two-dimensional (grid) layouts where item positioning on both axes is relevant.

Interesting. Does it make sense to learn both?

Yes it does, but focus on flexbox first as it has wider and more predictable cross browser support than grid. Once you're comfortable with flexbox, then move on.

My favorite tools to learn both are scrimba and flexbox zombies, which has a grid version too I think.

I will say that I only use flexbox on production stuff and have rarely if ever found myself wishing I could use grid.

Thanks, Stephen! I decided to start learning Grid. I believe that learning and using CSS Grid advances the web. It helps the industry embrace newer and better formats. It helps us grow as a community.

Cool, all that matters is that you start somewhereb since both are used to solve sightly different problems.

I'd say yes. They are different tools for different problems, and applying either tool to the problem of the other can make your life unneccessarily hard.

Most of the times you'll be just fine with knowing flexbox, but knowing grid can also save you some time in some situations.

Classic DEV Post from May 27

A beginner trying for the first Open Source Project

So I have been ranting few things since many months like I have graduated in ...

Lauro Silva
Software Engineer
Join ❀️

Come for the ideas. Stay for the community.