DEV Community

Discussion on: css grid or flexbox what is better?

ericgeek profile image

Each has different strengths and weaknesses, but it mostly comes down to whether or not you need to align things in just one dimension or two, and it's not that unusual to see both used within the same project or even the same page.

While flexbox can wrap to form multiple rows, you don't get actual columns (assuming a horizontal flexbox, reverse rows and columns for vertical) as there's no forced alignment between the items within the container that are in different rows. On the other hand, if you're dealing with things with a common width or height but varying in the other axis, getting both grids and columns can waste a lot of space, so this can be an advantage for flexbox in some cases.

CSS grid tends to be more performant than flexbox when used for laying out entire pages. I've heard the advice to use flexbox for components and grid for page layout, but in my opinion, that's really just a suggestion, there will be times that that suggestion isn't appropriate.

CSS grids tends to be a little more feature rich due to being a more recent design, but not hugely so, and some of the features, like gaps, are being backported to flexbox.

Get comfortable with both and use whichever you think is more appropriate.