4 ms·

Does anyone here have experience using CSS Grid on IE? I would like to start using it, but at work we have to support IE11, and I understand that it implements

Does anyone here have experience using CSS Grid on IE? I would like to start using it, but at work we have to support IE11, and I understand that it implements a different version of the standard. Is the amount of effort required to support both versions worth it?

thangngoc89 9y ago
Autoprefixer should take care of this for you. You write standard grid layout and it works on IE11.
- RussianCow 9y ago
  My understanding is that the MS properties don't map 1-to-1 onto the standard CSS properties, so I don't think this would always work, hence the question. That said, I assumed Autoprefixer didn't support CSS Grid for that reason, so thanks for pointing out that it does.
  - dmix 9y ago
    Autoprefixer doesn't just add prefixes, it translates the the syntax to browser compatible code as well, for example: a { display: flex; } Translates to: a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } It supports the 27 differences between the various browsers.
- ksenzee 9y ago
  Autoprefixer doesn't take care of this for you. You either write a bunch of -ms properties, or get your preprocessor to do it for you. Here's a working example: https://codepen.io/ksenzee/pen/OzRejj https://codepen.io/ksenzee/pen/OzRejj
- JimDabell 9y ago
  This is not true. IE11 simply doesn't support the whole of CSS Grid, and tools like Autoprefixer don't and can't add support. If you limit yourself to only using the parts of CSS Grid that IE11 supports, then you can write the standard equivalent to that subset and Autoprefixer will translate it for you, but you can't "just write standard grid layout", because that includes things there is no IE11 equivalent for.
lashkari 9y ago
It's not as simple as using auto-prefixer, since IE10 and IE11 use the older syntax. However, it's surprisingly not that bad for simple layouts. Here's a great resource covering the hows and whys: https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/ https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-... And here's a simplified example I threw together recently to demonstrate it in action: https://codepen.io/shahab/pen/ypWmZG https://codepen.io/shahab/pen/ypWmZG Basically, you lose auto-placement, named grid areas, and simple grid gaps, so you have to manually place items in the specific row/column for IE. But, I've found that it's still easier than the alternative in many cases.

thangngoc89 9y ago

Autoprefixer should take care of this for you. You write standard grid layout and it works on IE11.

RussianCow 9y ago
My understanding is that the MS properties don't map 1-to-1 onto the standard CSS properties, so I don't think this would always work, hence the question. That said, I assumed Autoprefixer didn't support CSS Grid for that reason, so thanks for pointing out that it does.
- dmix 9y ago
  Autoprefixer doesn't just add prefixes, it translates the the syntax to browser compatible code as well, for example: a { display: flex; } Translates to: a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } It supports the 27 differences between the various browsers.
ksenzee 9y ago
Autoprefixer doesn't take care of this for you. You either write a bunch of -ms properties, or get your preprocessor to do it for you. Here's a working example: https://codepen.io/ksenzee/pen/OzRejj https://codepen.io/ksenzee/pen/OzRejj
JimDabell 9y ago
This is not true. IE11 simply doesn't support the whole of CSS Grid, and tools like Autoprefixer don't and can't add support. If you limit yourself to only using the parts of CSS Grid that IE11 supports, then you can write the standard equivalent to that subset and Autoprefixer will translate it for you, but you can't "just write standard grid layout", because that includes things there is no IE11 equivalent for.

lashkari 9y ago

It's not as simple as using auto-prefixer, since IE10 and IE11 use the older syntax. However, it's surprisingly not that bad for simple layouts. Here's a great resource covering the hows and whys: https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/ https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-... And here's a simplified example I threw together recently to demonstrate it in action: https://codepen.io/shahab/pen/ypWmZG https://codepen.io/shahab/pen/ypWmZG Basically, you lose auto-placement, named grid areas, and simple grid gaps, so you have to manually place items in the specific row/column for IE. But, I've found that it's still easier than the alternative in many cases.