При использовании css grid в IE элементы перекрывают друг друга. Как исправить?

Нужно исправить часть кода, написанного на css grid. Никто написанное не проверил на IE11, добавил лишь код с autoprefixer. И как оказалось, все элементы перекрывают друг друга. Вот пример кода, который отлично работает во всех браузерах, кроме IE:

<div class="histories-container">
  <div class="event">1</div>
  <div class="event">2</div>
  <div class="event">3</div>  
  <div class="event">4</div>
  <div class="event">5</div>
</div>

.histories-container {
      display: -ms-grid;
      display: grid;
      -ms-grid-rows: 1fr;
      -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr;
    }
    
    .event:nth-child(2n) {
        -ms-grid-column: 2;
        grid-column-start: 2;
        -ms-grid-column-align: end;
        }
    
     .event:nth-child(2n+1) {
        -ms-grid-column: 1;
        grid-column-start: 1;
        -ms-grid-column-align: start;
        justify-self: start;
      }

https://www.w3schools.com/code/tryit.asp?filename=...

Нашёл решение с использованием:

nth-child(1,2,3...n) {
-ms-template-row:.....
}

Но там нужно знать точное количество элементов. В моём случае оно полностью динамическое и может иметь любое множество. Подскажите как решить, не хочется всё переписывать.