The Experimental Layout Lab of Jen Simmons | Hacker News Reader

The Experimental Layout Lab of Jen Simmons

labs.jensimmons.com

75 pointssharmi6 comments

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?

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.

You're probably right. I just haven't needed to many layouts complex enough to make it useful. I should look into it more.

For a relatively standard problem (the "holy grail layout", 3 equal-height columns with header and footer), this article isn't bad: https://bitsofco.de/holy-grail-layout-css-grid/

http://gridbyexample.com/ is another nice resource.

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.

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.

Reply on news.ycombinator.com