You very much cannot use flexbox for this. The whole point of these gridlanes is that not only can you have elements that automatically move across lanes when resizing the container, you can also have elements spanning multiple gridlanes and also fix the positions of elements in the grid, something wholly impossible in pure CSS flexbox. They link to the article[1] that even describes all the use cases this covers right below the first image.

Grid covers a lot of very subtle use cases that have historically required hacks like a list of select options where some can have icons on the left and some don't. You just need a subgrid that will automatically position every element in the select correctly to align them, regardless of whether there is an icon or not within the element in all select items. Previously you'd have to add a fixed width padding to the left and check if all the select items had icons. It also correctly scales the width and height of a row of items like cards where you want to ensure the alignment of headers, content, image etc depending on if that stuff is in there or not. You can have text missing and the card will still take up that size because your subgrid has defined it so. All of this needed JS, complex CSS hacks and so on. These aren't obscure features these are commonly used layouts that required a lot of time and effort to make it look nice.

[1] https://webkit.org/blog/17660/introducing-css-grid-lanes/