For instance, if you want to render a dynamic list of items that wraps if the number of items don't fit in 1 row using flexbox, and want to add equal vertical spacing to each row _only when the list wraps_ (i.e. without introducing any extra spacing on the first row), you'd need to add a margin-top to every item and then add a negative margin-top to the flex container to counteract that extra margin.

I originally found out about this trick in this StackOverflow question: https://stackoverflow.com/a/30891910. I'd love to be enlightened if anyone know of a better way of implementing this using flexbox.

Similarly, adding gutters for horizontal spacing between columns involves adding 1/2 the gutter width as margins to each item on both sides, and then setting negative margins of 1/2 the gutter width on both sides of the container.

With grid, we can simply set the row-gap and column-gap properties on the grid container without any additional ceremony.

It's not an either/or proposition.

I sometimes use both at the same time, depending on the project. Usually it's Grid for the big picture container layout stuff, and then Flexbox for laying out each individual portion.

I'll be happy when another 15% of my visitors upgrade to better browsers so I can use grid on my biggest project. Right now Flexbox fails with orphan elements, even when using margin: auto;, but this would be a perfect place to use Grid.

> Flex seems more flexible to me than CSS Grid.

Any day :)