When I've witnessed Flexbox and Grid (esp. templates) for the first time I liked Grid more, but as I've seen Flexbox more commonly used in the industry
grid-template-areas:
"avatar header"
"avatar body"
". body"
". footer";When I've witnessed Flexbox and Grid (esp. templates) for the first time I liked Grid more, but as I've seen Flexbox more commonly used in the industry
grid-template-areas:
"avatar header"
"avatar body"
". body"
". footer";So I expect that what you are mostly seeing is the evolution of CSS, from table to flexbox to grid. Table has no real responsiveness (to screen size), Flex does it _really_ well (especially for cases where the target is both PC and Phone etc.) But it has some limitations (mostly for me around column widths and the concept of "relative" column widths.)
Grid is really nice, it's a lot more like tables in concept, but at the same time has responsive abilities. These days I'm grid-first, although there are still a few places (depending on context) where flex is more appropriate.
Of course flex is also more "well known" (because it's older.) I feel a lot more comfortable there still, and until we have sub-grids I'm also a fan of using Grid layout for the "outside" and using Flex inside specific cells.
Though while grid borrowed a lot of ideas from flex, the creative usage of the grid template is so vast that you probably need to also learn by examples.
10 years later, kind of, I got back into web dev and css and learnt about flexbox, what an incredible difference. I was so thankful I wouldn't have to deal with floats ever again