CSS grid auto rows in IE11

Question

Just the simplest grid was rendered into one overlaped row in IE11 when I tried to build 2 columns grid.

Layout:

dl
  dt
  dd
  dt
  dd
  .............. 
  any number of rows
  ..............
/dt

CSS:

dl {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2fr;
    grid-template-columns: 1fr 2fr;

    -ms-grid-rows: auto;
    grid-template-rows: auto;

}

dt {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}
dd {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

In other browsers working Ok. What's wrong? Thanks

Is this helpful? https://stackoverflow.com/q/45786788/3597276 — Michael Benjamin, Nov 26 '19 at 20:11
IE11 requires you to specify the exact row and column for each element. So for your second row you actually need to do `dt { -ms-grid-row: 2 }` `dd { -ms-grid-row: 2 }` and so forth. That said, I just had to do this and used a SASS mixin to create up to 25 rows of CSS markup. — disinfor, Nov 26 '19 at 22:18
Just as disinfor said, we need to specific gird row number for each row in IE 11 in your case. The easiest way is to use SASS. You could use disinfor's solution and it can work well in IE 11. You could change the number of columns as you wish. — Yu Zhou, Nov 27 '19 at 03:30

score 4 · Answer 1 · answered Nov 26 '19 at 22:33

I'm adding this as an answer (even though Michael_B's duplicate addresses the core problem: CSS Grid Layout not working in IE11 even with prefixes ) - even though it's a utility to output multiple rules without having to manually do it.

Here's the output using SASS for the 2-column:

@for $i from 1 through 50 {
  dt:nth-of-type(#{$i}) {
      -ms-grid-column: 1;
      -ms-grid-row: 1 * $i;
  }

  dd:nth-of-type(#{$i}) {
    -ms-grid-column: 2;
    -ms-grid-row: 1 * $i;
  }
}

This will output:

dt:nth-of-type(1) {
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

dd:nth-of-type(1) {
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

dt:nth-of-type(2) {
  -ms-grid-column: 1;
  -ms-grid-row: 2;
}

dd:nth-of-type(2) {
  -ms-grid-column: 2;
  -ms-grid-row: 2;
}

dt:nth-of-type(3) {
  -ms-grid-column: 1;
  -ms-grid-row: 3;
}

dd:nth-of-type(3) {
  -ms-grid-column: 2;
  -ms-grid-row: 3;
}

dt:nth-of-type(4) {
  -ms-grid-column: 1;
  -ms-grid-row: 4;
}

dd:nth-of-type(4) {
  -ms-grid-column: 2;
  -ms-grid-row: 4;
}

dt:nth-of-type(5) {
  -ms-grid-column: 1;
  -ms-grid-row: 5;
}

dd:nth-of-type(5) {
  -ms-grid-column: 2;
  -ms-grid-row: 5;
}

dt:nth-of-type(6) {
  -ms-grid-column: 1;
  -ms-grid-row: 6;
}

dd:nth-of-type(6) {
  -ms-grid-column: 2;
  -ms-grid-row: 6;
}

dt:nth-of-type(7) {
  -ms-grid-column: 1;
  -ms-grid-row: 7;
}

dd:nth-of-type(7) {
  -ms-grid-column: 2;
  -ms-grid-row: 7;
}

dt:nth-of-type(8) {
  -ms-grid-column: 1;
  -ms-grid-row: 8;
}

dd:nth-of-type(8) {
  -ms-grid-column: 2;
  -ms-grid-row: 8;
}

dt:nth-of-type(9) {
  -ms-grid-column: 1;
  -ms-grid-row: 9;
}

dd:nth-of-type(9) {
  -ms-grid-column: 2;
  -ms-grid-row: 9;
}

dt:nth-of-type(10) {
  -ms-grid-column: 1;
  -ms-grid-row: 10;
}

dd:nth-of-type(10) {
  -ms-grid-column: 2;
  -ms-grid-row: 10;
}

dt:nth-of-type(11) {
  -ms-grid-column: 1;
  -ms-grid-row: 11;
}

dd:nth-of-type(11) {
  -ms-grid-column: 2;
  -ms-grid-row: 11;
}

dt:nth-of-type(12) {
  -ms-grid-column: 1;
  -ms-grid-row: 12;
}

dd:nth-of-type(12) {
  -ms-grid-column: 2;
  -ms-grid-row: 12;
}

dt:nth-of-type(13) {
  -ms-grid-column: 1;
  -ms-grid-row: 13;
}

dd:nth-of-type(13) {
  -ms-grid-column: 2;
  -ms-grid-row: 13;
}

dt:nth-of-type(14) {
  -ms-grid-column: 1;
  -ms-grid-row: 14;
}

dd:nth-of-type(14) {
  -ms-grid-column: 2;
  -ms-grid-row: 14;
}

dt:nth-of-type(15) {
  -ms-grid-column: 1;
  -ms-grid-row: 15;
}

dd:nth-of-type(15) {
  -ms-grid-column: 2;
  -ms-grid-row: 15;
}

dt:nth-of-type(16) {
  -ms-grid-column: 1;
  -ms-grid-row: 16;
}

dd:nth-of-type(16) {
  -ms-grid-column: 2;
  -ms-grid-row: 16;
}

dt:nth-of-type(17) {
  -ms-grid-column: 1;
  -ms-grid-row: 17;
}

dd:nth-of-type(17) {
  -ms-grid-column: 2;
  -ms-grid-row: 17;
}

dt:nth-of-type(18) {
  -ms-grid-column: 1;
  -ms-grid-row: 18;
}

dd:nth-of-type(18) {
  -ms-grid-column: 2;
  -ms-grid-row: 18;
}

dt:nth-of-type(19) {
  -ms-grid-column: 1;
  -ms-grid-row: 19;
}

dd:nth-of-type(19) {
  -ms-grid-column: 2;
  -ms-grid-row: 19;
}

dt:nth-of-type(20) {
  -ms-grid-column: 1;
  -ms-grid-row: 20;
}

dd:nth-of-type(20) {
  -ms-grid-column: 2;
  -ms-grid-row: 20;
}

dt:nth-of-type(21) {
  -ms-grid-column: 1;
  -ms-grid-row: 21;
}

dd:nth-of-type(21) {
  -ms-grid-column: 2;
  -ms-grid-row: 21;
}

dt:nth-of-type(22) {
  -ms-grid-column: 1;
  -ms-grid-row: 22;
}

dd:nth-of-type(22) {
  -ms-grid-column: 2;
  -ms-grid-row: 22;
}

dt:nth-of-type(23) {
  -ms-grid-column: 1;
  -ms-grid-row: 23;
}

dd:nth-of-type(23) {
  -ms-grid-column: 2;
  -ms-grid-row: 23;
}

dt:nth-of-type(24) {
  -ms-grid-column: 1;
  -ms-grid-row: 24;
}

dd:nth-of-type(24) {
  -ms-grid-column: 2;
  -ms-grid-row: 24;
}

dt:nth-of-type(25) {
  -ms-grid-column: 1;
  -ms-grid-row: 25;
}

dd:nth-of-type(25) {
  -ms-grid-column: 2;
  -ms-grid-row: 25;
}

dt:nth-of-type(26) {
  -ms-grid-column: 1;
  -ms-grid-row: 26;
}

dd:nth-of-type(26) {
  -ms-grid-column: 2;
  -ms-grid-row: 26;
}

dt:nth-of-type(27) {
  -ms-grid-column: 1;
  -ms-grid-row: 27;
}

dd:nth-of-type(27) {
  -ms-grid-column: 2;
  -ms-grid-row: 27;
}

dt:nth-of-type(28) {
  -ms-grid-column: 1;
  -ms-grid-row: 28;
}

dd:nth-of-type(28) {
  -ms-grid-column: 2;
  -ms-grid-row: 28;
}

dt:nth-of-type(29) {
  -ms-grid-column: 1;
  -ms-grid-row: 29;
}

dd:nth-of-type(29) {
  -ms-grid-column: 2;
  -ms-grid-row: 29;
}

dt:nth-of-type(30) {
  -ms-grid-column: 1;
  -ms-grid-row: 30;
}

dd:nth-of-type(30) {
  -ms-grid-column: 2;
  -ms-grid-row: 30;
}

dt:nth-of-type(31) {
  -ms-grid-column: 1;
  -ms-grid-row: 31;
}

dd:nth-of-type(31) {
  -ms-grid-column: 2;
  -ms-grid-row: 31;
}

dt:nth-of-type(32) {
  -ms-grid-column: 1;
  -ms-grid-row: 32;
}

dd:nth-of-type(32) {
  -ms-grid-column: 2;
  -ms-grid-row: 32;
}

dt:nth-of-type(33) {
  -ms-grid-column: 1;
  -ms-grid-row: 33;
}

dd:nth-of-type(33) {
  -ms-grid-column: 2;
  -ms-grid-row: 33;
}

dt:nth-of-type(34) {
  -ms-grid-column: 1;
  -ms-grid-row: 34;
}

dd:nth-of-type(34) {
  -ms-grid-column: 2;
  -ms-grid-row: 34;
}

dt:nth-of-type(35) {
  -ms-grid-column: 1;
  -ms-grid-row: 35;
}

dd:nth-of-type(35) {
  -ms-grid-column: 2;
  -ms-grid-row: 35;
}

dt:nth-of-type(36) {
  -ms-grid-column: 1;
  -ms-grid-row: 36;
}

dd:nth-of-type(36) {
  -ms-grid-column: 2;
  -ms-grid-row: 36;
}

dt:nth-of-type(37) {
  -ms-grid-column: 1;
  -ms-grid-row: 37;
}

dd:nth-of-type(37) {
  -ms-grid-column: 2;
  -ms-grid-row: 37;
}

dt:nth-of-type(38) {
  -ms-grid-column: 1;
  -ms-grid-row: 38;
}

dd:nth-of-type(38) {
  -ms-grid-column: 2;
  -ms-grid-row: 38;
}

dt:nth-of-type(39) {
  -ms-grid-column: 1;
  -ms-grid-row: 39;
}

dd:nth-of-type(39) {
  -ms-grid-column: 2;
  -ms-grid-row: 39;
}

dt:nth-of-type(40) {
  -ms-grid-column: 1;
  -ms-grid-row: 40;
}

dd:nth-of-type(40) {
  -ms-grid-column: 2;
  -ms-grid-row: 40;
}

dt:nth-of-type(41) {
  -ms-grid-column: 1;
  -ms-grid-row: 41;
}

dd:nth-of-type(41) {
  -ms-grid-column: 2;
  -ms-grid-row: 41;
}

dt:nth-of-type(42) {
  -ms-grid-column: 1;
  -ms-grid-row: 42;
}

dd:nth-of-type(42) {
  -ms-grid-column: 2;
  -ms-grid-row: 42;
}

dt:nth-of-type(43) {
  -ms-grid-column: 1;
  -ms-grid-row: 43;
}

dd:nth-of-type(43) {
  -ms-grid-column: 2;
  -ms-grid-row: 43;
}

dt:nth-of-type(44) {
  -ms-grid-column: 1;
  -ms-grid-row: 44;
}

dd:nth-of-type(44) {
  -ms-grid-column: 2;
  -ms-grid-row: 44;
}

dt:nth-of-type(45) {
  -ms-grid-column: 1;
  -ms-grid-row: 45;
}

dd:nth-of-type(45) {
  -ms-grid-column: 2;
  -ms-grid-row: 45;
}

dt:nth-of-type(46) {
  -ms-grid-column: 1;
  -ms-grid-row: 46;
}

dd:nth-of-type(46) {
  -ms-grid-column: 2;
  -ms-grid-row: 46;
}

dt:nth-of-type(47) {
  -ms-grid-column: 1;
  -ms-grid-row: 47;
}

dd:nth-of-type(47) {
  -ms-grid-column: 2;
  -ms-grid-row: 47;
}

dt:nth-of-type(48) {
  -ms-grid-column: 1;
  -ms-grid-row: 48;
}

dd:nth-of-type(48) {
  -ms-grid-column: 2;
  -ms-grid-row: 48;
}

dt:nth-of-type(49) {
  -ms-grid-column: 1;
  -ms-grid-row: 49;
}

dd:nth-of-type(49) {
  -ms-grid-column: 2;
  -ms-grid-row: 49;
}

dt:nth-of-type(50) {
  -ms-grid-column: 1;
  -ms-grid-row: 50;
}

dd:nth-of-type(50) {
  -ms-grid-column: 2;
  -ms-grid-row: 50;
}

You can use: https://www.sassmeister.com/ to generate the CSS (so you don't have to install gulp/grunt or use a local preprocessor).

Thanks a lot, guys. You answered the issues that blow up my mind. Finally I rewrite the code on flex but this understanding will be very usefull for me in future, I hope for somebody else, too. — Max.A, Nov 28 '19 at 10:52

CSS grid auto rows in IE11

1 Answers1

Linked