DEV Community

Wenchen "Neo" Li
Wenchen "Neo" Li

Posted on

The pursuit of difference between CSS grid and flexbox

Yesterday I came across the discussion of this question:

And it seemed like the best answer is this from Rachel:

It's a very straight forward answer and I was like "oh, ok." and moved on.


πŸ€”

But last night when I was in bed, I got started thinking about this again: I just didn't think this is it.

And when I was thinking it more, I realized it's also about the organization and relationship between the parent and the children: in flexbox, the children dictate how the layout is organized as well as its own space proportion; meanwhile in grid, the parent decides how things are aligned and what proportion of space each child should take.

After realizing that, I went to sleep peacefully. 🌝


And this morning, I can't wait to share my discovery with the community.
When I was looking for the tweets above to embed, I saw the other branch of the thread, which has the same conclusion as I do! πŸ€“


So the conclusion is that the difference between flexbox and grid is not just one dimensional or two, but also whether the parent or the children should specify the size and proportion of the content.


Last but not least, in case you're wondering which one to choose and use, here's a way to help you decide:

Cheers and ciao! πŸ˜†

Discussion (0)