Flexbox VS CSS Grid
Since the launch of CSS grid, a lot of questions have surfaced about whether it could eventually replace Flexbox. In my opinion, this could never be the case with CSS grid because they complement each other, they are not the same and are not meant to be used in the same way. The ideal way to use them is to combine them and make the best out of each other.
This is because if you use CSS grid, you can have a container with children that can have the flex property, and if you have a flexbox container you can have children with grid associated properties. for example, if you only need a container to be next to one another you could use simply flexbox to do so. On the other hand, if your layout is composed of rows and columns that are going to vary in responsive versión you could use CSS grid.
Also, CSS grid has Good support in Chrome, Firefox, and Safari which means you should definitely learn it.
So, is CSS grid going to eventually replace Flexbox?
When I started learning CSS grid, It was love at first sight because of how easy everything became with complex layouts. Making a complete, functional layout is much easier with CSS grid than with Flexbox. However, this does not mean you should ignore Flexbox at all. As I said, it is best if you are going to use them together. CSS grid also gives us great malleability because we can build our grid and créate the number of columns and rows we need and the space needed between each. Everything needed to make your layout a piece of cake.
With CSS grid, you can place elements in 2 dimensions, rows, and columns at the same time, while in Flexbox you can only manipulate one dimensión. In Flexbox you have to choose between rows and columns.
For example, let’s say you want to build the following interface.
If what you want is a complete layout composed of rows and columns with different elements in different positions you can use CSS grid to do it.
And that is how you do it. I hope this has helped you in some way or another. And most importantly remember, CSS grid and Flexbox are friends, not enemies, they go well with each other and get along great.
