They have different use cases. The rule of thumb is to use Flexbox if you're laying out content along the X or Y axis and Grid if you need to lay it out over both the X and Y axes.

That's an okay rule of thumb, but I find myself using grid more and more for traditional flexbox applications like a horizontal list of cards that wraps. Little things like grid-gap (flex child margins are a constant source of pain) and auto-fill with minmax [0] make a big difference to me in rapid prototyping.

[0] eg: grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));

Firefox supports grid-gap for flex, but I no other browsers do yet.

https://caniuse.com/#search=gap

This is a very good rule of thumb.

Grid is great for the layout of the whole page (header/content/sidebar/footer) or specific gridded containers.

Flexbox is great for everything else, and specifically what you said about in one dimension, like form label/input or a repeating set of thumbnails, or justified buttons.

I agree for the common case, but CSS grid even for one axis can be better, especially for gutter/gap.

It's nice to be in a place with CSS where we're talking about all of the good ways to do things rather than telling each other "if you abuse this feature you can accomplish the task in 2 of the major browsers. YMMV."

It would be nice to find a document showing how to do some examples in both Grid and Flex and compare the amount of markup needed, also pros and cons of each for each example