CSS网格在IE 11中没有正确显示

Question

我有一个CSS网格来显示一个组合。它适用于Chrome，Firefox和Edge，但不适用于最新的Internet Explorer。

以下是Chrome，Firefox和Edge的内容：

这是IE 10和11中发生的事情（9或更低时根本不显示）：

CSS

.wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 1em;
    grid-auto-rows: 250px;
    margin: 0 auto;

    display: -ms-grid;
    -ms-grid-columns: ( minmax(300px, 1fr))[4];
    -ms-grid-rows: 250px;

}

.wrapper .box {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    display: flex;
    align-items: flex-end;
    grid-column: auto;
    grid-row: auto;
}