If you've been following CSS grid at all, or if you look up anything related to it, you'll probably encounter something written by Rachel Andrew. She's been doing an incredible job at documenting and promoting CSS grid.
In the past she wrote a CSS grid polyfill [0], but sadly it never got updated to the latest version of the spec. It'd be an easier sell if you could polyfill it reasonably on some older browsers, even if performance suffered a bit.
Right now the last holdout is Edge [1], which is funny because they were the first to ship the older spec, going back as far as IE10 or IE11. Luckily, the next version will be shipping the latest spec.
I've noticed autoprefixer [2] supports a grid option. I'd love a guide that explained any incompatibilities between the two versions. Getting a mostly working grid on IE11 and Edge would probably make it an easier sell for many.
When flexbox started growing popular there were guides showing you could support most features on IE10 and beyond with little effort if you used autoprefixer. Since there are equivalent versions of most attributes on older browsers, you just had to be aware of bugs and gotchas. For example, the default value for flex-grow, flex-shrink, and flex-basis (and their older equivalents) changed between versions, so if you always had to set them. In addition to any incompatibilities between versions, all implementations were buggy, so you had to be aware of bugs and their workarounds. Luckily, they're all well documented on the flexbugs [3] repo.
Considering grid is more complicated than flexbox, I wouldn't be surprised to find it has a few bugs. Does anyone know if there's a gridbugs repo that developers can track?
EDIT: After a quick search, I found a blog post [4] talking about supporting the older version.
[0] https://github.com/FremyCompany/css-grid-polyfill/
[1] http://caniuse.com/#feat=css-grid
[2] https://github.com/postcss/autoprefixer
[3] https://github.com/philipwalton/flexbugs
[4] https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-...
In the past she wrote a CSS grid polyfill [0], but sadly it never got updated to the latest version of the spec. It'd be an easier sell if you could polyfill it reasonably on some older browsers, even if performance suffered a bit.
Right now the last holdout is Edge [1], which is funny because they were the first to ship the older spec, going back as far as IE10 or IE11. Luckily, the next version will be shipping the latest spec.
I've noticed autoprefixer [2] supports a grid option. I'd love a guide that explained any incompatibilities between the two versions. Getting a mostly working grid on IE11 and Edge would probably make it an easier sell for many.
When flexbox started growing popular there were guides showing you could support most features on IE10 and beyond with little effort if you used autoprefixer. Since there are equivalent versions of most attributes on older browsers, you just had to be aware of bugs and gotchas. For example, the default value for flex-grow, flex-shrink, and flex-basis (and their older equivalents) changed between versions, so if you always had to set them. In addition to any incompatibilities between versions, all implementations were buggy, so you had to be aware of bugs and their workarounds. Luckily, they're all well documented on the flexbugs [3] repo.
Considering grid is more complicated than flexbox, I wouldn't be surprised to find it has a few bugs. Does anyone know if there's a gridbugs repo that developers can track?
EDIT: After a quick search, I found a blog post [4] talking about supporting the older version.
[0] https://github.com/FremyCompany/css-grid-polyfill/
[1] http://caniuse.com/#feat=css-grid
[2] https://github.com/postcss/autoprefixer
[3] https://github.com/philipwalton/flexbugs
[4] https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-...