In late 2015 I wrote a “brief” for A Book Apart, entitled Get Ready For CSS Grid Layout. The book was published in January 2016, some fourteen months before we had Grid Layout in Firefox, Chrome and Safari. Now, the 2nd edition of that book is released, Get Ready For CSS Grid Layout is a fundamentally rewritten brief guide to grid, in many ways a follow-on to that first edition. This posts rounds up some of those changes, and my thoughts on rewriting a book that launched 14 months before the specification it described was available to use in production.
At the time of writing the initial guide, I thought that grid was perhaps closer to shipping than it was. However the specification, and implementations, still had a way to go before grid was ready to use. However that little book, taught many people the basics of the spec. Along with the other writing and speaking I had been doing for over three years by that point, it formed part of my attempt to evangelise and teach this upcoming layout method.
Two years on from grid shipping in browsers, and four years on from my proposing this topic to A Book Apart, it was time to update this guide. Revisiting my words of almost four years ago, was interesting. Much of the book was accurate, describing the main features of grid layout, how to create a grid and place items on it. However, throughout all of the examples, were skinny tracks used as spacing between grid cells. This was due to the fact that, at the time of writing, the gap properties had not been specified for Grid Layout. As the book went into production, the (now renamed) grid-gap, grid-column-gap, and grid-row-gap properties were added to the specification, I added a note, but it was too late to do a full rewrite.
More fundamentally however, I felt that the book encouraged a use of grid that I would now deem problematic. One of the features of grid layout is that you can completely separate the visual layout from the document structure. No longer tied to normal flow, it is possible to move things around, perhaps to reflect different layouts for different breakpoints. What I was less aware of in 2015, was how this usage could potentially disconnect the logical order from visual display and create problems for many users. This feature remains a powerful part of grid layout, however until we find a way to solve the accessibility issues it brings, not a feature I want to give such a priority to in a book. Certainly not without warning of the need for careful testing with a variety of users and devices.
The addition of the gap feature enabled many of the things about grid we love to use today. Using skinny tracks to create space between items, meant that auto-placement couldn’t be used in those layouts, as grid would try to place items into the gap. Therefore the previous book featured auto-placement far less than this 2nd edition. The amount that people use auto-placement has in general been a surprise to me. The ability to place items accurately was always the main draw when I first looked at grid, and the initial Internet Explorer 10 version had no auto-placement included.
While the book is now teaching the present rather than a peek into the future, I do finish by taking a look at Grid Level 2 and the subgrid feature. This is a coming soon feature, implemented in Firefox Nightly. It was nice to be able to bring this little book up to date, teach the spec as I teach it today, look to what is coming next, and perhaps inspire a new bunch of people to use and understand Grid Layout.
Get Ready For CSS Grid Layout, 2nd edition is published by A Book Apart in ebook and print-on-demand versions. Available from A Book Apart.