The short version of this post is that CSS Grid has me excited about the prospects of web layouts again. From here on if I have the option to use CSS Grid I’ll be using it. Go to Rachel Andrew’s fantastic Grid By Example site and do some examples.
Longer Version
This all kicked off when a friend shared this talk by Marten Rand-Hendriksen about CSS Grid:
It had me hooked for the full 30 odd minutes. It’s rare for a conference talk to grab me enough actually try something, but I opened my text editor immediately after watching it. If video isn’t your thing, here’s his slides.
There’s a lot of reasons why I think that styling on the web is hard for people. Mostly it comes down to a question of mental models. Folks who are learning naturally think that CSS will be able to easily do something it can’t. If you’ve ever watched someone try to put two columns side by side or center something you’ve seen this firsthand. I’d argue that CSS Grid’s primary strength is that it closely fits the mental model most poeple are already trying to apply to web layouts. They want to draw boxes and put them next to or on top of each other. CSS Grid allows you to go from low fidelity to sketch to working version in a more intiuitive way.
That’s very powerful and I’m excited to see what emerges from it.
Semantic Markup Tho
Ease of coding is one thing, but grid also makes it far easier to separate the semantic markup of a page from the visual styling. Your templates don’t need to be strewn about with div’s to make it all work. Instead you piece the page together semantically and then visually it can match your…well, your vision.
The Basic “A-ha!” Example
I’d recommend working through this basic example yourself. Pick your classic website template: a header, two columns left to right, and a footer. This is difficult–although not impossible–to pull off without grid and shockingly easy to pull off with grid. I’m still a bit stunned at how minimal the css is to make it work even responsively.
You really should go do it yourselves. Here’s a working solution. And here’s a gist of the code.
Note: you don’t actually need the line grid-template-columns:1fr 1fr; if all of your columns are going to be the same width as they are in this example. I find it’s better to be explicit though because future you needs all the help they can get.
A Few Things That Caught Me Up
Here are a few issues I ran into. Putting them here in hopes you don’t also make my mistakes:
Don’t Forget Your Display
Just don’t forget this line in your css on the main parent grid element or you will be sad for 45 minutes wondering why nothing was working:
display:grid;
Get your grid numbers straight
Off by one errors are easy to run into. The grid designations start with “1” on the far left and end with one more than whatever you’ve designated for your columns.
So if you’ve done this, as I did:
grid-template-columns: 1fr 1fr;
And you want something to span the width of the grid you need to set it to the following:
grid-column: 1 / 3;
That will go from the left edge to the right edge. To me it made more sense to do “1 / 2” (“the first box to the last one, of course…?”), this is actually how Microsoft did it for the initial spec. There are good reasons to get away from this, but it’s not as intuitive to me.
Firefox is Good
Firefox has a grid inspector built into the dev tools. Navigate to the element that has display: grid on it and click on the little grid icon to toggle it on.
Super useful for seeing how it’s all fitting together.
Draw it Out
If you’re having issues with getting it all aligned I found it useful to roughly draw out the layout(s) and put boxes around discrete chunks. It helps to visualize your intended output. Code is great, designing using code is not.
Is it supported everywhere? What about IE?
Edge has full support as do the other major browsers and mobile devices. IE 11 has support with a prefix for an older spec.
You should be designing with progressive enhancement on the mind though. I liked what Rand-Hendriksen had to say in his talk about this: “Accessible mobile-first layouts work well on all screen widths”. You can deliver the “mobile experience” to users whose browser’s don’t support the latest and greatest fancy specs and it’s probably fine.
Rachel Andrew is the expert on all of this. She has a great blog post on the pros and cons of trying to use it in IE:
The good news is that the IE implementation is pretty much frozen in time between IE10, 11 and current versions of Edge (presumably until Edge updates to the new specification). So work you do to implement grid in IE should work in those versions without needing to do different things for different IEs.
Do remember that Edge is now “the” browser for Windows 10 and beyond. It’d been a few years since I took a look at the browser marketshare and it was englightening: Chrome is very much in the lead these days.
Special Thanks
Thanks to Sam Firke for moral support and editorial comments on this post!