When you use css grid in IE the elements overlap. How to fix?

Need to fix the part code written on css grid. One written not tested on IE11, I added only code with autoprefixer. And as it turned out, all of the elements overlap. Here is a sample code which works fine in all browsers except 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=...

Found a solution using:

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

But they need to know the exact number of elements. In my case it is completely dynamic and can have any variety. Tell me how to solve it, you do not want to rewrite everything.
April 3rd 20 at 17:22
1 answer
April 3rd 20 at 17:24
Write so
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
.histories-container
 display: flex;
 flex-wrap: wrap;

.event
 width: 100%;
 min-height: 1px;
 flex: 0 0 8.333333333333332%;
 max-width: 8.333333333333332%;
The items are to each other, the width of the write in % - Filomena_Murr commented on April 3rd 20 at 17:27

Find more questions by tags CSSLayoutInternet ExplorerCross-browserismCSS Grid