A year ago today, Firefox was the first browser to ship into stable their CSS Grid implementation. Closely followed by Chrome and Safari. It’s been quite a year for my favourite layout method.
It has been fascinating to see how people have adopted Grid, and the different ways people are developing with the specification. It has also been interesting to me to discover the things people want to do, suggestions for future levels of the Grid specification; or perhaps that point to other types of layout entirely being required. The suggestions that you raise against the specification are heard, please keep adding them. New CSS does not appear overnight, but the CSS WG does listen and take these ideas into account. The first requirement to tackle for Grid is the subgrid feature, and a First Public Working Draft of the Level 2 specification is now published, it will focus on defining subgrid.
As I’ve continued to speak, and increasingly lead workshops about Grid, I’ve begun transforming the way I teach the subject. Simply focusing on Grid – which is often what conference and workshop organisers ask for – essentially leads to the assumption that this is one layout method to rule them all. It is impossible to teach grid without talking about CSS Intrinsic and Extrinsic Sizing, Writing Modes and Box Alignment. It would be wrong to teach Grid without explaining how it and Flexbox are solutions to different problems. The number of attempts I have seen where a developer is trying to reinvent multi-column layout, or even floats in Grid demonstrates to me how much a holistic programme of learning about layout is needed. As I say in many of my talks as I demonstrate how some “old CSS” solves a problem, “don’t forget that old CSS is still useful for what is was designed for.”
Teaching this new layout, has also demonstrated to me how a real understanding of these other specifications is becoming increasingly important. It isn’t just a case of knowing which layout method to use, it is understanding the underlying concepts well enough not to be baffled by them. In particular, once we get away from sizing everything in percentages, take advantage of the flexibility of the fr unit in grid or the flex properties in flexbox, we have to understand how the browser is working out how big things are. It is far easier to understand why we align things to the start and end of containers rather than top, right, bottom and left once you understand that Writing Modes exist, and why.
In my book The New CSS Layout I bring together all of the parts of layout, I’m increasingly doing that on stage and in workshops. My online CSS Workshop covers all of CSS Layout in depth. I’ve also begun publishing articles that look at how different parts of CSS work with Grid – covering Sizing, Generated Content, and also things like the concept of a Block Formatting Context. I hope to continue with this approach over the next year, because there will be new people coming into the profession now who do not have the baggage that us old hands have. They get the chance to learn how layout on the web works, with real tools that will enable their creativity. Without battling floats or needing to rely on frameworks they can hopefully be better placed to deal with the important jobs of developing performant and accessible websites. I can’t wait until we no longer need to explain how floats can be used for grid-type layouts, and I expect my slide decks will be starting to document that transition over the next year or so.
I am writing this post in LA, over the past two days I have taught layout and new CSS to an audience of designers. I have enjoyed hearing from them how these new possibilities spark a renewed interest in design for the web. I hope that in the next year we start to see some of that creativity come through, and we can figure out exactly what is possible now, and what we want to be possible next.