It's partly a case of people mean different things when they talk about "a grid" and how they would use a grid. Bootstrap popularized one simplified model of layout they called "Grid", and MUI is continuing a version of that. CSS Grid is an attempt to unify that simpler "Grid" with more powerful grid constructs and as a more generalized 2D layout engine. It takes the things learned from Flexbox and Table layout and tries to unify them into a sane 2D layout system that has the power of both and additional tools.

I think you can replace nearly every use of Flexbox (and Tables for layout) with CSS Grid and have overall better dev ergonomics. The `grid-template-areas` tool and named areas can be great dev ergonomics far better than anything that came before it in CSS, especially if you have highly responsive layout needs and/or desire to decouple HTML source order with layout order (for better, cleaner accessibility, for one instance; or for cleaner streaming order on slow pages, as another reason).

It has a learning curve more than the simpler "Bootstrap-era" Grid designs, certainly, but I think it's an easier learning curve than Flexbox (but esp. if you've already learned Flexbox, because they share a number of concepts).

Another big problem is that designers never got the "semantic" bit. I don't know how much of that is that most designers aren't used to thinking systematically and like to design a page at a time instead of a system for a whole site and how much of it is CSS being structurally wrong. So we have MUI and bootstrap to impose an application-like structure or tailwind to just "do what I mean".

Professional designers are all about consistent systems of symbols and interactions for what it’s worth

I’m lucky when I work with one of those!

You are comparing CSS Grid to a Flexbox abstraction that MUI calls "Grid". Your point might still be valid with the fairer comparison: https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flex...

In the example there is a mixture of style and content. This would be of course more ergonomic. However, the strength of CSS is that you can decide later on to change the style without touching the content.

Except for the first line in the "How it works" section of MUI docs:

> It uses CSS Flexbox (rather than CSS Grid) for high flexibility.