
The Experimental Layout Lab of Jen Simmons - sharmi
http://labs.jensimmons.com/
======
watchdogtimer
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?

~~~
detaro
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.

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

~~~
detaro
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/](https://bitsofco.de/holy-
grail-layout-css-grid/)

[http://gridbyexample.com/](http://gridbyexample.com/) is another nice
resource.

