I’ll bite. In my experience, almost every case where CSS Grid has been touted as enabling something new was actually already possible with flexbox alone. Care to share your UI pattern that I gather uses Grid and Flexbox, and I’ll see if I can reasonably reproduce it without Grid?
Basically, a list of items arranged in a grid where the number of columns is dynamic depending on the width, items are wrapped dynamically from left to right, each column consumes the maximum amount of space, there's a fixed gap between columns, and the last row is aligned left, not stretched. I had to build one recently, and it was a perfect fit for grid.
Cannot this be done with just floats or inline-blocks and percentage width? Unlike grid, it would work in a larger number of browsers.
Also, I think that tutorials for things like flexbox or grid should include fallbacks for older browsers. Because generally frontend devs simply copy the code from tutorial so if you don't include the fallback, they won't implement it.
But then it's responsive to the page size, not the container size. That's a small, but important difference.
For instance, I recently made a component to be included on other pages at work. It had to look good no matter the size the page gave it. So they might put it into a 400px wide container, on a 1600px wide page. If I used vw or media queries to draw it based on page size, it would behave wrong.
I was thinking about that problem earlier. Is there not a CSS unit for container size? If not, that seems like a very useful addition. Like a more embedded version of vw/vh.
AFAIK every browser but IE11 supports the modern basic grid syntax. Edge has supported the new syntax since Edge 16 which is old enough to be widely deployed in enterprise now. So as far as I'm concerned that's the "Vast majority of browsers" and for static grids I just use the old syntax as a fallback for IE11
The support for grid is very good for the vast majority of modern applications[1], given its power and the things it can simplify that often require JS solutions otherwise
You can reproduce a fair bit of Grid using just Flexbox (and we did that for quite a while before Grid came along)—but it's going to be far more verbose, both your HTML and CSS, and probably more brittle and complicated to change.
If you're setting precise sizes in flexbox, or very specific flex values, you're probably in Grid territory. Ideally, flexbox is best when you want things to stretch/shrink to fit and you want the items to determine their own sizes. Grid is best when you have a specific layout/sizes in mind, and you want to impose that layout onto the items.
A horizontal list, where each item has variable width based on its content. Inside each item there is additional hidden content, which should factor also into the item width. The hidden content should display behind the primary content.
When hovered, the hidden content will appear via an animated dropdown. The height of the content varies as well.
