Grid and Flex serve different purposes for layout. Also Grid has many of the same keywords as flex, but is more complex. I wouldn't call it more intuitive.
Flex is better if the individual elements should have some control over the layout, whereas grid is better if the container should be fully controlling the layout.
Great 20min tutorial vid with examples and details on the above: https://www.youtube.com/watch?v=3elGSZSWTbM
You can nest flex such that it acts in a 2D way but it’s a bit annoying
Even the deconstructed pancake example in the posted article doesn't seem to be impossible with CSS grid but I haven't given it too much thought.
Another data point I use is that if I find myself adding a container for the sole purpose of layout, I realize that I should be using grid. That is one of the biggest wins of grid: you don't need to pollute your markup with nearly as many layout/presentation-only elements.
I guess I’m wondering why it’s any more complicated than:
* Flexbox is for formatting in one dimension (or axis)—a row or a column.
* Grid is for layout in 2-dimensions—columns and rows; a.k.a. a grid.
In fact, you can use flexbox and grid in the same layout, each doing its thing.
In fact, you can use flexbox and grid in the same layout, each doing its thing.
100% At 17:30 near the end of that video I linked is an example of mixing them.
I find CSS Grid easier to understand than Flex. I also think it's easier (arguably more logical) to start with Grid and then understand Flexbox and how fits in your Grid.
The problem is that popular frameworks like Bootstrap and Bulma still don't support CSS Grid (they use flexbox only for layout, although Bootstrap 5 has opt-in CSS Grid). You could argue that CSS Grid makes frameworks redundant for layouts only.
Developers have rightly complained how cumbersome CSS layout has been in the past. It's ironic CSS Grid is available in all modern browsers but developers still aren't using it.