CSS Grid: first thoughts
I’ve been following the CSS Grid conversation for a while now. Aside from the passionate few, there’s been little press around it. I’ve been curious because I previously created my own grid systems in stylesheets, and used them routinely until Flexbox came along.
When Rachel Andrew presented at the Web Directions conference Code in 2016, CSS Grid support was available under browser flags only. Earlier this year, Edge was the only browser with any support (as it was Microsoft who presented the spec). And, just a few weeks ago it gained Chrome and Firefox support with vendor prefixes. Update 7/4/17: Safari, Opera and IE (partial support) are now on board!
This is great news but it’s only the beginning of a long journey to majority browser compatibility and developers adopting the technique as the norm. Take its cousin, Flexbox — the first working draft was released in July 2009 and it’s still considered ‘new’ (the first CSS Grid spec was released November 2012).
I’m a huge fan of Flexbox and use it wherever I can. I waited until the support was high enough so I didn’t cause unnecessary client headaches and spend hours on tailored fixes for known bugs.
So I’m thinking, how long will it be until I’m using CSS Grid? The extra browser support on board since last month was the green light for me to actually look into it for the first time.
So on Friday I watched Rachel Andrew’s presentation, writing detailed notes as I went. In a nutshell, grid is a new display type (i.e. display: grid) that allows you to implement a grid framework (similar to Skeleton or Bootstrap) in a straightforward way exclusively in your stylesheet. It works with two dimensions, whereas Flexbox works with only one. Note: Grid is not designed to replace Flexbox. They do, however complement each other and share a number of the same property values. They are also both applied to the direct children.
For those who are familiar with creating table layouts, you’ll find similarities with the thinking behind Grid. But of course, without the obvious eccentricities and limitations. The Grid spec looks quite comprehensive, and sophisticated in its well-thought through scenarios. There are some aspects of the spec not yet implemented (such as subgrids) which I’m sure will be ironed out over time. I’ll continue to keep an eye out for developments with Grid, and create those opportunities to experiment.