CSS Grid - IE 11 перекрываются

Question

Этот вопрос уже задавался здесь и даже был помечен как дубликат, но не было никакого объяснения или ответа, который бы на самом деле решил проблему человека, который задал вопрос, поэтому я пытаюсь снова, так как все говорят что IE 11 поддерживает css-grid, если используется правильно.

У меня есть базовая CSS-сетка, в которой я также использую префиксы -ms-, но по какой-то причине в IE 11 элементы сетки будут размещены поверх друг друга вместо ожидаемого поведения.

Вот базовая сетка, где вы можете увидеть проблему

.grid {
  display: -ms-grid;
  display: grid;

  -ms-grid-columns: 50% 50%;
  grid-template-columns: 1fr 1fr;
}

.cell {
  border: 1px solid black;
}

http://jsbin.com/wuxaridabo/1/edit

Answer 1

Попробуйте использовать этот автоматический префикс PostCSS:

https://autoprefixer.github.io/

Answer 2

Вам нужно расположить каждый элемент вручную, используя -ms-grid-row и -ms-grid-column

.calendar > div:nth-of-type(1){
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.calendar > div:nth-of-type(2){
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}