In my experience, grid is very useful for setting up the overall layout of your page, whereas flex is well suited to the content within each segment.
For example, if you want to move your navigation/controls to the bottom of the screen on mobile devices for better ergonomics, it's far easier with grid than flex because you can specify a completely different layout at each breakpoint. With flex you often have to duplicate content in different areas of the screen, then conditionally hide/show them based on the current CSS breakpoint. This can have a negative effect on page load times, SEO, and overall complexity, as well as just being kinda gross.
Another example: imagine you have a 2x2 layout, say a sidebar and top-bar that join in the top left quadrant. Keeping ([0,0], [1,0]), and ([0,0], [0,1]) the same height and width respectively, without specifying explicit heights or widths, is very difficult without grid. It might be impossible, but I'm not that great at CSS so I'm not 100%.
For example, if you want to move your navigation/controls to the bottom of the screen on mobile devices for better ergonomics, it's far easier with grid than flex because you can specify a completely different layout at each breakpoint. With flex you often have to duplicate content in different areas of the screen, then conditionally hide/show them based on the current CSS breakpoint. This can have a negative effect on page load times, SEO, and overall complexity, as well as just being kinda gross.
Another example: imagine you have a 2x2 layout, say a sidebar and top-bar that join in the top left quadrant. Keeping ([0,0], [1,0]), and ([0,0], [0,1]) the same height and width respectively, without specifying explicit heights or widths, is very difficult without grid. It might be impossible, but I'm not that great at CSS so I'm not 100%.