Three years with CSS Grid Layout

As I was updating my slides for An Event Apart in San Francisco, I realised how much complexity I was removing from the talk that I gave in May this year. I was able to remove this complexity based on changes to the specification itself, and it made me think about the journey this specification has been on. In my self-appointed role as CSS Grid cheerleader, I’ve been along for the ride and this post is a little look back at my three years with the Grid. It shouldn’t be taken as a true history of the specification – there are others better placed to explain that – more the assorted thoughts of an interested observer to the process.

Well, look at this!

In May 2012 I spoke at Sud Web in Toulouse, one of three English speakers at the event. Trying to follow along with the French talks, I found myself in a workshop with Bert Bos, where he described a number of new layout methods in French, thankfully also with demonstration code.

One of the modules he spoke about was CSS Grid Layout. Even in French, even without a browser in which this new layout method was implemented, I had seen something I wanted to explore further. On the way home I made some examples of how I thought this layout method worked and was excited about the possibilities.

Where did the Grid Layout specification come from?

The ‘modern’ CSS Grid Layout specification began as a first public working draft published on 7 April 2011. The majority of the editors of that draft were from Microsoft, and Internet Explorer 10 shipped with a -ms prefixed implementation. That implementation is the implementation of Grid that you will find in Internet Explorer 11 and also, at the time of writing, in the Edge browser. It is why, if you look at Can I Use, you will see that Internet Explorer is the only browser showing support for Grid Layout.

This draft is not the first time the ideas around Grid had been mooted by the CSS Working Group. As far back as 1996 you could read about Frame-based layout via stylesheets, in 2005 these ideas were revived as CSS3 Advanced Layout Module which became the CSS Template Layout Module. These are not new ideas, however it was not until the IE10 implementation that we as web developers had something to play with.

Grid in IE10

Once I discovered that there was an implementation of Grid in IE10 I started building some simple examples. As an old person, who cut her web developing teeth back when front-end development meant chopping up images and placing the with nested tables, Grid made conceptual sense to me.

At the end of 2012 I wrote an article for 24 Ways describing how Grid Layout worked, demonstrating a fluid 16 column grid. In that article I noted that to create this kind of Grid we needed to add classes to describe the grid to our markup. A way around this would be to use LESS or Sass to do the calculations in the CSS. What this meant was that this initial Grid specification fell at the same hurdle as our existing layout methods. As with the grid system used in Bootstrap and other frameworks, we were describing our layout in the markup (or in the pre-processor code). This works however it makes adding additional breakpoints, or otherwise redesigning the layout hard. There is a limit to how many breakpoints we can stuff into our markup.

Grid moves on

I followed the development of Grid and began writing and speaking about the specification. I would get a queue of people after each talk wanting to comment on the specification, express excitement and sometimes dismay about what was and wasn’t included.

I’m good at playing with things in browsers but find it harder to visualise how something without an implementation might work. However I created examples of how I thought the changes to the specification would work, and continued to write and talk about it. In April and May 2013 I wrote about the named grid lines and areas that were part of the updated specification. In this article I started to think about the issue of “gutters” for grid. This was based on feedback from people who had seen my presentation in which I mentioned Grid alongside other layout modules. The “gutter problem” came up over and over again in those post-talk conversations.

Grid appears in Blink and Webkit

I didn’t have to wait too long to see the changes to the spec implemented. Bloomberg sponsored the implementation of Grid into Blink and Webkit, work that is being done by open source consultancy Igalia since mid-2013. The work in Blink can be found unprefixed but behind the Experimental Web Platform Features flag. What this meant was that I could get my hands on the updated implementation and begin creating examples using it.

Having an implementation made it far easier for me to experiment and also to show real examples to people when talking about Grid. In September 2014 I collated all of my examples into a website gridbyexample.com, and was becoming used to teaching Grid, adding examples to my CSS Layout Workshop. Teaching something is an excellent way to find the weak spots. I find this with our own product Perch. When I create a tutorial I often find the places where we are doing something in a clunky way, or where our documentation is poor. By trying to explain the concept to someone else, suboptimal things are quickly reflected.

No more describing layout in markup

One of the most exciting elements of the updated specification was the ability to fully describe a layout in CSS. I’d not been able to develop a grid system using the IE10 implementation that did not rely on some description of the layout in markup. However this became straightforward with the new draft and the implementation in Blink – you can see the Grid used in my 24 Ways article rebuilt with the specification at this stage here and also some newer examples recreating the Skeleton Grid.

When teaching people about Grid this point really interested people. However I also learned that describing layout in markup was now so prevalent that people found it hard to grasp the concepts of Grid Layout. People showed me examples where they had quite literally translated the grid system from Bootstrap into Grid Layout along with the redundant row markup and classes. Many of the emails I get from people declaring something impossible to do with Grid layout, come down to this inability to move away from thinking about Grid Systems as described in markup. Often the solution to their problem is very simple, but it requires a different way of thinking about how we do layout.

The Gutter Problem

My other frustration when teaching people about Grid was the lack of proper gutters. Earlier in the development in the spec I had a conversation on the mailing list about this issue. However it looked as if row and column gaps would be pushed into Level 2 of the specification. I believed that the addition of these properties in Level 1 would make Grid so much easier for simple use cases. So I continued to talk about it, in the hope that the issue would keep some profile and something might make it into Level 1.

Even my simplest examples needed to use a Grid Track as a gutter. This meant that we were immediately working around these gutter tracks. It also meant that we could not have tracks used for gutters and use auto placement as items would be placed into the gutter tracks. When creating a complex 12 or 16 column grid framework on which to place our items we had to account for multiple content and gutter tracks, making the definition and placement far more complex than I felt it should be.

I presented my talk, along with my section complaining about lack of gutters at CSS Day in Amsterdam. In the audience was spec editor Fantasai, who is now my favourite person as she wrote column and row gaps into the specification. These are now the properties grid-row-gap and grid-column-gap along with a shorthand grid-gap to set both at once, and they work in a similar way to column-gap in Multiple Column Layout.

It all just got simpler

With grid-column-gap and grid-row-gap implemented in Chrome Canary I made the decision to revise my presentation before An Event Apart. I started by updating my simple examples, if you have Canary with the Experimental Web Platform Features flag enabled you can see the before and after examples linked below, take a look at the source to see the changes.

• Simple two column layout: before | after
• 12 column layout: before | after

Suddenly, it all gets much simpler. I can do a two column layout an only have to deal with two column tracks. I can create my Skeleton Grid example and a 12 column grid can be just that – 12 column tracks. I can introduce grid far more quickly, more clearly, a huge clunky issue that required a lot of explanation right from the outset has gone.

We need to talk about accessibility

The time saved in my presentation means I can talk a bit more about the accessibility implications of layout methods that separate the document source fully from the presentation. With Grid Layout, as long as elements are a direct child of the element that is a grid, they can be positioned anywhere on the grid. This has obvious implications in terms of things like tab order.

I’ve written on this blog about my concerns regarding the potential for authors and layout tools to flatten out markup in order to make every element a child of the grid. Please take a look at that, have a think about accessibility and things like Grid and Flexbox. As the spec matures, as we start to look forward to using it in production, this is something that those of us who write about and teach Grid need to think about. I’m glad to see that starting to happen.

So when can we use it?

This is the big question. Currently the IE10, 11 and Edge implementation is the only implementation not behind a flag. Changes to the specification have slowed, notable to me as every change means an update to the talks and workshops that I teach Grid Layout in.

You can start to play with Grid Layout right now if you use Chrome, some of the newest features implemented including the column and row gap properties are at the time of writing only in Canary. You will also find that some of my examples now work in Firefox Nightly Builds, again behind a flag. I’m keeping an up to date list of implementation information over at gridbyexample.com/browsers.

Unlike Flexbox which developed with prefixed implementations, Grid has developed hidden away behind a flag. This has benefits in that we don’t end up with the Flexbox situation of people pushing code into production that is using an old version of the spec. However the downside of developing behind a flag is that without something that can be used in production, getting the thoughts and experience of people who use CSS is hard. I’ve been showing people examples of Grid for three years, it is only in very recent months that much other writing about the subject has begun to show up in the Google Alerts I have set up to capture new information on the subject.

This ‘behind a flag’ development does mean however that when Grid is shipped, it is likely to be in a much better state than Flexbox was when we began to use it. Other than the old, prefixed IE10 and 11 implementation, browsers are implementing against the newest versions of the spec. Those column and row gap properties were added in May, renamed at the end of August and Igalia shipped them in Chrome in mid-October.

I wanted to write about the past three years because what I’ve learned along the way is just how much goes into creating a specification of the complexity of Grid. I’ve seen how many tiny decisions have to be made; how many implications have to be considered. Had the version of the spec that is prefixed in IE10 shipped it would have been useful, but what we have now is far superior. It solves so many more problems. The process works, as slow as it may seem to us who wait anxiously to be able to take advantage of these techniques. I am happy that we are waiting for something that I really believe has the ability to completely change how we do layout on the web.