How to refactor CSS Grid for IE11 Compatibility - css

Question

I'm not very familiar with CSS and thought I had hit the jackpot with CSS grid however I did not realise that it wasn't very compatible with IE11. I have run into a number of problems trying to fix the following code:
.my-grid-filters {
display: grid;
grid-auto-rows: minmax(50px, 50px);
grid-gap: 5px;
}
.my-grid-filters filter {
display: flex;
align-items: flex-end;
}
#media screen and (min-width: 40em) {
.my-grid-filters {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 5px;
}
.my-grid-filters filter:nth-child(1) {
grid-column: 1 / -1;
grid-row: span 2;
}
}
I ran it through the Autoprefixer online tool which produced the following:
.my-grid-filters {
display: -ms-grid;
display: grid;
grid-auto-rows: minmax(50px, 50px);
grid-gap: 5px;
}
.my-grid-filters filter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
#media screen and (min-width: 40em) {
.my-grid-filters {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-gap: 5px;
}
.my-grid-filters filter:nth-child(1) {
grid-column: 1 / -1;
-ms-grid-row-span: 2;
grid-row: span 2;
}
}
However this seems to stack all of the grid elements on top of each other. This article includes a lot of information but I'm struggling to apply it to my code.
It seems to suggest that I need to place each element in the grid manually but part of my use case for CSS Grid is that I don't know how many of the repeat elements might be on the screen at once as they are generated by iterative javascript. This also makes it difficult for me to apply separate div ids too them.
Any help would be appreciated