CSS grid spec, the hot topic on the web right now. Almost every front-end developer blog has at least one article on it, how it is going to revolutionise the web design landscape and detailing how to use the new CSS grid spec…

With that in mind, I’m going to do something a little different instead, I’m going to talk about my past and current experience with the CSS grid spec.

First Impressions

I first started playing around with CSS grid in 2015. As seen in the Codepen below, I used the syntax of the time ( the one still present in IE and Edge 15 and below) and a polyfill so it showed correctly in non-supported browsers.

See the Pen CSS grid layout module showcase by Liam Wright (@Uiliam) on CodePen.

Though the demo I created was fairly simplistic I was still excited by the possibilities of the spec.

I remember showing this to my co-workers of the time, and with them being cynical and apprehensive they were convinced it would be years and years before we would be able to use the spec fully. I couldn’t blame them as they had seen all the kerfuffle with Flexbox and the need for so many different vendor prefixes and vendor variations, which to this day we are still feeling the repercussions from. I’d done my research though and was optimistic, I’d read the articles about the spec being behind browser flags so we didn’t have a to deal with a flexbox fiasco again.

Recent Experience

Fast forward to March 2017 and both Firefox and Google Chrome shipped with the finalised standard of CSS grid, with the other popular browsers not far behind.

I was excited that the spec had finally been released but was also disheartened by the fact that people would still be using browsers where the spec was not supported (damn to the misguide IE9 users who refuse to update). Due to this, the changes made to the spec and the fact IE and Edge were dragging their feet as usual in updating to the latest specs I know it would be a little while yet until it could be fully used in production.

Still, I plowed on and started using CSS grid in my personal projects so I would be ready for the day when it would more viable to use in production. I add fallbacks to flexbox and inline-blocks so it would still be functional in most browsers. While doing this for my personal project I have observed a few things;

• Due to the fact I have been using CSS frameworks like Bootstrap and Foundation for a while now, I found it difficult to break out of the mindset these grid system put you in.
• It is hard work putting fallbacks (like these: https://rachelandrew.co.uk/css/cheatsheets/grid-fallbacks) in as it feels like you are coding things twice.

That second point actually got me thinking if there was an easy way of doing the fallbacks via SCSS mixins. I have done a couple of experiments with this which I’ll perhaps touch on in a future article. For now, I’ll say currently it is but not without some sacrifice to the design or some over the top code bloat.

Conclusion

I feel I have only scratched the surface of the possibility of the CSS grid spec, especially when you look at whats been done in challenges like this: https://www.smashingmagazine.com/2017/10/css-grid-challenge-2017-winners/.

I honestly think we’re going to see some awesome things come out of CSS grid spec in the next few years and my current experience with it all indicates that the predicted revolution is coming sooner rather than later.