I originally thought CSS grid was something that was newer and better than flexbox and so I looked into it to see which I should use. As I started using these new things, I learned that the two actually work together. One is not better than the other, rather they both focus on different things, both of which are massively important to laying things out on the web.
Flexbox lets you lay things out on a single axis. A good example is when you want a header to have menu options on the left and some user control options on the right. You can use flexbox to get things laid out quite nicely and easily.
CSS Grid is something that you use when you want to lay things out on the x axis and the y axis. Grid lets you position things almost by using x y co-ordinates which is helpful for laying out content. A good example of where grid shines is when you want to make a gallery of images. CSS Grid makes this trivial and cuts down on the amount css significantly.
I'm enjoying developing a video site using flexbox and css grid now that I don't need to write a massive nest of floats and messing with weird heights. Things for the most part just work!