5

I am trying to make following example work in IE 11: https://dojo.telerik.com/ariSElEj

Looks like this in normal browsers: enter image description here

My CSS:

.wrapper {
    display: grid;
    grid-template-rows: repeat(6, 100px);
    grid-auto-flow: column;
    grid-auto-columns: 33.3333%;
}
* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}

IE 11 just ignores the CSS and displays 1 column.

Is there anyway to have this layout in IE with minimal change to the CSS? OR, does anyone suggest "browser specific HTML" like this example -> How to display browser specific HTML?

splash
  • 13,037
  • 1
  • 44
  • 67
DavidDunham
  • 1,245
  • 1
  • 22
  • 44
  • See https://caniuse.com/#search=grid – tobiv Jun 26 '18 at 13:57
  • Possible duplicate of [CSS Grid Layout not working in Edge and IE 11 even with -ms prefix](https://stackoverflow.com/questions/45786788/css-grid-layout-not-working-in-edge-and-ie-11-even-with-ms-prefix) – Jon Uleis Jun 26 '18 at 15:00

0 Answers0