Maybe this will come with practice, but I would love to understand, clearly, which use-cases are best fits for flexbox and grid respectively. With the very limited experimentation I've carried out on both, they each seem far superior to messing about with floats (hooray!), but I can't quite get a fix on their respective merits.
What use-cases work with which basically boil down to what you're trying to: flexbox does layout in a single dimensions, and grid does layout in two dimensions.
If you're trying to implement something with layout constraints in both dimensions, you want grid. If you're not, you can probably use grid, but flexbox is likely easier.
In addition, an important determination is not just if you want layout constraints in both dimensions but if you want/need source order independence in both dimensions.
With flexbox you get layout constraints in both dimensions with proper source nesting (rows inside columns or vice versa, ad infinitum) and you get source order independence in the "current direction" (within this row or this column), but not between rows/columns in the grandparent container (or the great-grandparent, etc).
With grid, you can have source order independence in both directions, very nice and easy.
(Source order independence matters for responsive needs where things reflow to different grid places/flex orders based on viewport width, media type or other factors. Source order independence can also be a big important factor for accessibility. The "semantic web dream" is kind of sort of dead or at least asleep these days, but source order independence is a huge win for the semantic web. Finally, source order independence is just nice for keeping HTML markup clean and minimal, which has long been the dream of CSS.)
