> My experience is that almost all of the early “CSS Grid lets you do this!” examples were either: ⓐ actually achievable with Flexbox in a non-contrived way; or ⓑ outright weird things that will seldom actually be desired, being more related to art direction than layout or similar.

The thing is once you "get" Grid you will never go back to any other layout. Here is one example (an extremely common layout: sidebar to the left stretching from top of the container to the bottom, header on top right, main in middle right and footer at the bottom right):

<style>

section {
display: 'grid';
grid-template-areas:
"sidebar header header"
"sidebar main main"
"sidebar footer footer";
}
aside {
grid-area: sidebar;
}
header {
grid-area: header;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}

</style>

<section>

<aside>Sidebar</aside>
<header>Header</header>
<main>Main content</main>
<footer>Footer</footer>

</section>

Notice how I did not have to define a bunch of "col-" or "row-" or explicitly specify percentages and flex properties to each child markup element to layout my grid? If I need a completely different layout, all I need to do is change the "grid-template-areas" in section style. I can swap the "sidebar" from the left side of the page to the right side without much effort. I don't even need to touch the markup at all (which I would have to if I was using Flexbox)!

Example:

<style>

section {
display: 'grid';
grid-template-areas:
"header header sidebar"
"main main sidebar"
"footer footer sidebar";
}

</style>

Flexbox feels imperative while Grid feels declarative to me. Why would I want to use Flexbox over the convenience Grid provides? Grid does everything Flexbox does and then some! With Flexbox I would have to do all the calculations myself to achieve a layout that is now set in stone. Any changes would require me to either change the markup or change the calculations in each flex element or both. Grid on the other hand can be changed declaratively! I would just need to specify my layout and the rendering engine takes care of the rest! I don't need to change the markup! After working with Grid for a few months now I have come to the realisation that I have pretty much stopped wasting time on calculating and positioning layout and fiddling with deep nested markup. I can say with conviction that no other feature has given me this level of satisfaction. Kudos to the team that conceptualised Grid! To top it all, Grid takes care of accessibility issues one would face with Flexbox. Maybe you want a Sidebar to the right for people who aren't visually challenged but with Grid you can maintain the hierarchy for visually impaired users who rely on screen readers. For them, the Sidebar would always come before the content and not after. Flexbox is heavily dependent on how you place your markup which sucks from an accessibility point of view. With Grid, the layout declaration is completely dissociated with markup order (which is very important because you don't want to be juggling with both at once while setting your layout). Flexbox is tied to markup order which means any major changes would require you to mess with the CSS styles as well as the markup. If you have deeply nested markup you are in a whole world of pain!

Just my two cents!