I’ve still not gotten to grips with CSS grid, mostly because flexbox does what I want so I end up falling back on it at the first hurdle. But the rest of it is very clear to me these days.
One explanation people like to give is:
CSS Grid is for layouts in 2 dimensions, Flexbox is for layouts along one dimension.
Which can be confusing because you absolutely can use Grid for layouts along one dimension too.
Here is my stupid sounding rule of thumb that I think is more useful: If you want a grid layout use grid, if you want a flexible layout use flexbox.
Grid quite literally splits the area into a grid but what if you want to just say "I want these two elements to be as far apart as possible within the container they are in" (ie a navbar, you want the logo on the left about 20 pixels away from the left of the viewpoert and you want the actual navigation to be on the right with the rightmost element 20px away from the right of the viewport). Flexbox is better for that.
(I'm considering proposing one myself).
Allowing scrolling both ways would have been perfect. Switching to left-aligned when content overflows would be acceptable. But completely prohibiting access to half the content when an overflow occurs? Absolutely asinine.
I believe there may be ways to get around this with layers of inner divs and weird `overflow: ` incantations, but that's exactly the kind of bullshit flex was supposed to solve.
See https://developer.mozilla.org/en-US/docs/Web/CSS/align-items. If you need to enable a "safe" mode to prevent data loss, and that isn't supported on any mainstream browsers... you fucked up.
It will take you from a n00b to a Grid pro in no time.
Grid systems existed long before CSS grid and were dead-easy to understand and use (960, Bootstrap etc). CSS grid, by comparison, is completely unintuitive. Sure, it’s definitely more powerful, but the barrier to entry is way higher.
Flexbox complements grid imo, it's not an alternative.