0

I'm trying to use the CSS grid to make some columns on my page, but I cannot get it to work on IE.

Here is the CSS I have and it works fine on Chrome and Firefox.

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    grid-column-gap: 15px;
    grid-row-gap: 10px;
    grid-auto-flow: dense;
    margin: 1em auto;
    padding-left: 10px;
    padding-right: 15px;
    font-size: 12px;
}

Is it possible to convert this CSS to work on IE?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Ennio
  • 1,147
  • 2
  • 17
  • 34
  • What version of IE? – Becuzz Feb 21 '18 at 17:03
  • 1
    IE11 supports an older version of the [CSS Grid](https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/) spec. It will never support the new version because IE is dead. – TylerH Feb 21 '18 at 17:03
  • I need to have it working on IE 10 and above. – Ennio Feb 21 '18 at 18:13
  • IE doesn't support many of CSS Grid core features like autoplacing grid items, column/row gaps, auto-flow. You'll have to place items manually and specify `-ms-grid-row` and `-ms-grid-column` for every grid item. Also you won't be able to use functions like `repeat` in `-ms-grid-columns`. – Vadim Ovchinnikov Feb 21 '18 at 22:18

1 Answers1

-1

You might be able to get partial support for CSS grid in IE >= 11 with the -ms- prefix. Reference.

IMO you can write fallback styles using flex to support older browsers and yet get the advantage of CSS grid on newer ones.

Divyanshu Maithani
  • 13,908
  • 2
  • 36
  • 47