One thing flex cannot do well is white space: how do you leave a gap of content without spacer divs?

This becomes more complicated when the number of divs is dynamic as flex determines position based on siblings. With grid you already have defined the “layout”, and you are just placing the div into the correct position.

Grid does that in both axis too. So although you may be able to kind of replicate the 1d version with flex, it becomes much harder to align in 2D.

I wrote an article about this: https://cssprinciples.com/3/grid/

Kevin Powell has a few great videos on YT comparing flexbox to grid. Grid can be very powerful if you want overlapping grid areas. Something that was previously only possible using absolute positioning. Also, auto-fit and auto-fill

The main reason I tend to reach for grid is responsiveness. Makes it way easier to change the layout at different screen sizes.

Flexbox -> 1-dimensional layouts

Grid -> 2-dimensional layouts

That being said, I use Flexbox for pretty much everything.

I typically look at grid as the outermost container. It is very good at dealing with coarse layout concerns because you can constrain on both dimensions and define a layout per media query (or whatever).

I've never been in a situation where nesting grids makes sense. Nesting flexbox obviates the need for grid in most cases.

not at all, the wet dream of css is to be able to layout just with css and only semantic markup, to which flexbox falls short sometimes because you need to add non-semantic elements (columns and rows).