CSS Grid lands in Firefox 52

I had no idea, when I spotted an interesting looking specification in a workshop led by Bert Bos back in 2012, that the next 5 years of my life would be consumed by CSS Grid Layout. And while it may not be entirely healthy for a person to form emotional attachments to CSS specifications, I hope you will forgive me for being more than a little excited about the fact that Grid actually lands in a production browser today.

For some history of the specification and my involvement with it, read my post from November 2015, Three years with CSS Grid Layout. At that point, I am pretty sure I expected Grid to land in browsers far sooner than March of 2017. However, what starts to land in browsers today is ready for you to use in production. This isn’t an experimental specification, this isn’t a specification that is going to change under you. It’s ready. It lands in Firefox today, Chrome next week, Safari when the current beta ships. A specification of this size has never landed like this before, shipping almost simultaneously in almost all of our browsers. It’s a shame that Edge decided not to join the party, that really would have been the icing on this particular interoperability cake.

While most people are just starting to realise what Grid offers, I feel as if the spec is an old friend. I’ve built hundreds of examples, written tens, possibly hundreds of thousands of words about it. I’ve learned more about CSS, the process of creating CSS, and about how features get into browsers than I could ever have believed possible five years ago. I like to think that my contributions have helped move the spec, or at least awareness of it among web developers, forward in some small ways. The credit for it however mostly goes to editors Fantasai, Tab Atkins and Rossen Atanassov, who built on the original work by the editors from Microsoft, along with input from a whole host of browser implementors, the rest of the CSS WG and web developers too. Spec editors truly are the unsung heroes of our industry, everything we do resting upon the attention to detail they bring to a spec like Grid.

There are many little twists and details in the story that gets Grid from an interesting idea to something we get to use in our work. The fact that the original implementation was in IE10, a fact that meant for several years the only green on Can I Use was for IE10 and Edge. The fact that the implementation in Blink and WebKit was performed, not by Apple or Google engineers, but by a team from Igalia. This open source consultancy were funded not by browser vendors to do this work, but by Bloomberg. Grid also tells the story of Vendor Prefixes versus Browser Flags, if you compare the path that Flexbox took to that of Grid.

The story doesn’t stop here. Now I get to not only use Grid in my own work, but to see what you do with it. This year the talks I will be taking to conferences centre around using grid in production, dealing with non-supporting browsers as we do so. I’ll then be making good use of my time at those conferences to find out what people are doing with grid, and also what isn’t possible in grid, what is still to be solved. For now though, if you haven’t taken a look, it is a great time to do so. I hope it makes your life easier, in terms of the things you need to build. I also hope that you see the opportunities for creativity it brings, perhaps we will start to see things looking a little different around here.