For anyone unsure whether to use flex or grid, the mental shorthand that I use is whether the container or the elements in a container should have more control over the layout.
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.
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.
For anyone unsure whether to use flex or grid, the mental shorthand that I use is whether the container or the elements in a container should have more control over the layout.
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.
What I'd add your summary: Flex wrapping is a different kind of 2-dimension behavior than a grid, but they're both useful 2 dimensional layout behaviors.
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.
Are there any layout behaviors that are possible to achieve with flexbox but impossible with grid? Basically, setting aside inversion of control at the moment, does grid subsume flexbox?
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.
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