Frontend designers often extol the benefits of layouts using CSS Grid, but I have to wonder if it's really that important given that people spend the majority of their browsing time on a mobile phone.
While it's now __possible__ to layout complex designs easily using CSS Grid, it's usually not the best user experience on a phone. Why go to the trouble of making a beautiful layout with lots of white space that won't show on mobile without scrolling?
Yes, you can use media queries to give a better UX on mobile. But if the end result is going to be a single-column page that strips out whitespace for the majority of users, why not just use a collapsing columnar layout?
It’s simple. CSS Grid is more powerful than whatever hacks or workarounds people used to collapse columns and similar things. With this new system, developers can create responsive layouts much more easily. Less time spent on the layout means more time can be spent on other things like performance and accessibility.
Making nice looking collapsing columnar layouts gets easier with Grid as well (I've played a bit with it, and a few things that required horrible hacks before now are really easy). You also get a lot more flexibility in how you order things, which is nice both for responsive layout and things like screen readers.
And not everything has a so vast majority of mobile users that optimizing the experience for desktop/tablet users isn't worth it - especially for sites/SPAs with many elements and very complex layouts.
Not sure what you're saying here. You'd set up media queries to use grids to maximum effect for large displays, and single-column/collapsing/flexbox-based schemes for small displays. These strategies are not mutually exclusive.
Note that grids — in the Swiss design school sense — are about visual harmony, not just about placing things next to each other horizontally.
While it's now __possible__ to layout complex designs easily using CSS Grid, it's usually not the best user experience on a phone. Why go to the trouble of making a beautiful layout with lots of white space that won't show on mobile without scrolling?
Yes, you can use media queries to give a better UX on mobile. But if the end result is going to be a single-column page that strips out whitespace for the majority of users, why not just use a collapsing columnar layout?