Yesterday I came across the discussion of this question:
For y'all that have an understand of both CSS grid and flexbox, what's your favorite way of explaining the difference?15:53 PM - 25 Jan 2019
And it seemed like the best answer is this from Rachel:
Rachel Andrew@rachelandrew
@chriscoyier Flexbox is for one dimensional layout. A row OR a column. Grid is for two dimensional layout. Rows AND columns.15:55 PM - 25 Jan 2019
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! 🤓
I'm not the world's biggest fan of the 1D vs 2D differentiation of grid vs flexbox, only because I find most of my day-to-day usage of grid is 1D and it's great for that. It is a strong distinction though that 2D layout is _possible_ with grid though in ways it is not in flexbox.16:11 PM - 25 Jan 2019
Rachel Andrew@rachelandrew@chriscoyier There is a more subtle difference in whether you want to specify down from the parent, or up from the children. I often explain flexbox as being best when you have a bunch of stuff of different sizes and just want a reasonable in proportion layout from them.16:20 PM - 25 Jan 2019
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:
Rachel Andrew@rachelandrew@chriscoyier If you start constraining all your flex items with a width, then more often than not it will be easier to use grid.16:21 PM - 25 Jan 2019
Cheers and ciao! 😆
Top comments (0)