When to reach for Grid instead
The first thing Jen Simmons said in the 2017 Grid launch talks was: flexbox and grid are not rivals. They solve different problems. Flexbox handles one axis at a time. Grid handles both at once. If you are forcing flexbox to do two-dimensional work with flex-wrap and manual widths, you are writing grid code with the wrong tool.
One dimension vs two
A nav bar is one-dimensional: items distributed along a row. Flexbox. A photo gallery with rows and columns that align across both axes is two-dimensional. Grid. The MDN "Relationship of grid layout to other layout methods" page puts this distinction at the top of the article for a reason.
Where flexbox wraps but falls short
flex-wrap: wrap lets rows overflow into new lines, but each row sizes independently. Items in row 2 do not align with items in row 1. If you need a consistent grid where column 3 lines up across every row, flexbox cannot do it without hardcoded widths. Grid can, with grid-template-columns. Rachel Andrew's Get Ready for CSS Grid Layout (A Book Apart, 2016) makes this the opening example.
When flexbox is still the right answer
Toolbars. Form rows. A logo plus a nav plus a user menu in the header. Anything where you are distributing a handful of items along a single line and care about their relative size more than their absolute grid position. Reaching for Grid here is overkill — you do not need a track system to put three things in a row.
They compose
Nothing stops you from nesting a flex container inside a grid cell. A grid for the page shell, flex containers inside each cell for the widgets. That is how most production sites actually work. Andy Bell and Heydon Pickering's Every Layout (2020) is built on exactly this mix — primitive layout components that compose because neither spec tries to do the other's job.