Yesterday on stage at An Event Apart in Seattle Rossen Atanassov responded to my 2014 email to Microsoft about my hopes that they would update their Grid Layout support, to let me know that they would now be starting work to do so. While this may be the slowest response to an email ever, I’m so excited to see Edge joining the browsers who have implemented the Grid spec, as it stands today. I have a huge amount of respect for the team there, and we shouldn’t forget that Grid started with that team. We have Microsoft to thank for the fact we have Grid Layout at all. From a totally personal point of view, the only way I managed to dig into Grid and get excited about it was because I had the implementation in IE10 to play with.
I dug out some of those early experiments and writing, if you have played with modern grid layout you may find these interesting. If you want to implement grid with support for older browsers you may find these useful.
In December 2012 I wrote a piece about the IE10 implementation for 24 Ways, Giving Content Priority with CSS Grid Layout. This serves as a good introduction to what is possible with the IE10 implementation of grid layout. You can see many of the features that made it into the updated specification - and also some of the limitations which are now solved.
In my book CSS3 Layout Modules 1st edition (January, 2013) I covered Grid alongside other “CSS3” layout ideas. That book also covered Regions and Exclusions, which also have implementations in IE10, 11 and Edge. I would love to see Exclusions implemented in more browsers.
In this video of my talk The New CSS Layout, recorded at Front Trends in 2013, I show IE examples, noting that the specification had just changed so I also demonstrate the new spec - despite not having a browser to show it in! This post also explains the differences between the IE10 implementation and the new 2013 Working Draft. Things have again moved on since then, however it is interesting to see how the specification evolved over time.
If you need to support IE10, 11 and the current Edge
It is worth remembering that while the IE10 implementation misses some features of new Grid, and some properties are different, it works very well as implemented. If you want to create fallback support for IE10, 11 and current Edge until the new implementation ships, then it is worth using. The implementation is
-ms prefixed. You can write your IE grid code, alongside your new grid code quite safely. That 24 Ways article is a good guide to the IE implementation and I have some help for those wanting to create fallbacks in this post about the IE implementation and Autoprefixer support.
I’m excited and encouraged by this news, and by the fact that the Edge team listened to your feedback and votes and made this work a priority. Keep pushing vendors to implement the things you want, keep writing and talking about these things. It works.