Flexbox is a layout system for 1D content. CSS Grid is for 2D content, but it's designed in such a way that it can remain responsive to different container sizes, unlike <table>. This actually makes it pretty complicated and unwieldy, because - once more for the people in the back - doing a responsive layout in explicitly 2D terms is a very weird thing to be doing and usually isn't what you actually want.

> Flexbox is a layout system for 1D content.

An individual flexbox container is one dimensional. To get a 2D layout, you nest rows and columns.

> ...doing a responsive layout in explicitly 2D terms is a very weird thing to be doing and usually isn't what you actually want.

I have no idea how you would come to that conclusion. To me, a "responsive" layout is one that adapts to the viewport size. The viewport is 2D. This is a 2D layouting problem.

A subset of that problem is concerned with fitting content of a fixed viewport width to a variable height, i.e. your classic web site. That's what you may call "1D content". Once you're trying to get a layout that adapts to both viewport width and height (i.e. an ordinary application), CSS can get quite ugly.

> a "responsive" layout is one that adapts to the viewport size

Precisely. More often than not, accomplishing this requires more than just squishing and stretching. Panes have to wrap around at certain points and the layout has to shift. You can do this with a bunch of special cases, but the better way is to let the rules of flow work for you. For example, you can have a flex child "grow to fill available space but have minimum size", so that if less than that minimum size is available it wraps around to the next line. You want to talk about your layout in terms of a series of sections, not a fixed grid. This was impossible with <table>; CSS Grid provides tools for special-casing these things, but it's still way more obtuse than letting them occur naturally.