CSS Grid

Design Websites Like iOS

I've been eager to get better at CSS Grid for 3 reasons.

One: I want to move away from Bootstrap and Foundation when I am just using the grid. I've gotten lazy. I love front end frameworks but if you aren't using the bells and whistles they add a lof of code for a grid.

The response to this, though, are the stripped-down grid-only versions.

Two: With responsive grids you have to design for 2-3 breakpoints which is annoying and I think the HTML is ugly. Maybe I should grow up. Or maybe you should shove your media queries in your bottom. Major organizing elements all have 3 classes before you even did any styling.

Three: I am a trendyboy (n: one who follows trends blindly and identifies as a male human). New is better, always, in trendyboy world.

And that takes us to CSS Grid, which seems pretty great.

This video has interested me as we start to worry about viewport sizes beyond the desktop/tablet/phone sizing that is standard for responsive front end frameworks. We got phablets, watches, IoT devices with oddball screens. We got 4,000 Android devices running 19 versions of Android. We have ever larger monitors with cinematic aspect ratios, as well as browsers on Smart TVs and Apple TV and Amazon Fire. My wife browses on her Kindle from time to time. It is more and more frustrating and verbose to try and use media queries and a responsive grid with 4 sizes to find your way out of this mess.

It is interesting to think about how with Xcode, you design iOS layouts around the viewport, snapping objects to the sides of the device to deliver consistency across iOS devices. Now we can use CSS Grid to think about websites in the same way instead of assuming an infinite scroll along the bottom of the edge. I wonder how much the Xcode visual layout influenced the creators of CSS Grid.

Firefox has a grid inspector also which is amazing and you can see in the video.