如何修复：ie11上的CSS网格

Question

p.heroText.jjj {
    display: grid;
display: -ms-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-columns:  1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr;
    font-size: 3rem;
    margin: 0;
}
p.heroText.jjj span.foxing {
    font-family: 'foxingregular', arial-black;
}
p.heroText.jjj span.foxing.small {
    margin: 0;
    font-size: 5rem;
    line-height: 9rem;
    grid-column: 4/5;
-ms-grid-column: 4/5;
    grid-row: 1/2;
-ms-grid-row: 1/2;
    padding-left: 5px;
}
p.heroText.jjj span.foxing.large {
    margin: 0;
    font-size: 14.4rem;
    line-height: 27rem;
    grid-column: 3/5;
-ms-grid-column: 3/5;
    grid-row: 1/4;
-ms-grid-row: 1/4;
    padding-left: 5px;
/*     position: absolute; */
}

p.heroText .foxing .cursive-period {
	font-family: serif;
	font-size: inherit;
	font-weight: normal;
}

p.heroText.jjj span.normal-text-1 {
    margin: 0;
    line-height: 9rem;
    grid-column: 1/4;
-ms-grid-column: 1/4;
    text-align: right;
    grid-row: 1/2;
-ms-grid-row: 1/2;
    margin-right: 10px;
}
p.heroText.jjj span.subtext {
    margin: 0;
    line-height: 4rem;
    grid-column: 4/5;
-ms-grid-column: 4/5;
    text-align: left;
    grid-row: 4/5;
-ms-grid-row: 4/5;
    font-size: 1.5rem;
}

<p class="heroText jjj"><span class="normal-text-1">word. word.</span> <span class="foxing small light-blue">and</span> <span class="foxing large light-blue">word<strong class="cursive-period">.</strong></span><span class="subtext"><img style="max-width: 20%; height: auto;" src="https://sifu.unileversolutions.com/image/en-AU/recipe-topvisual/2/1260-709/sauerkraut-hotdog-50441846.jpg" /><br class="" />word</span></p>

我有一个英雄横幅，上面有一些使用CSS Grid显示的文本。在所有浏览器上，它都会显示，并且应该在ie11上显示为正确位置。

我做了很多研究，并尝试了不同的解决方案，但都没有成功。我也将代码放入Autoprefixer中，并对其进行了一些移动，但仍未达到应有的位置。我已经发布了一段代码。

p.heroText.jj {
    display: grid;
    display: -ms-grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-columns:  1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr;
    font-size: 3rem;
    margin: 0;
}
p.heroText.jjj span.foxing {
    font-family: 'foxingregular', arial-black;
}
p.heroText.jjj span.foxing.small {
    margin: 0;
    font-size: 5rem;
    line-height: 9rem;
    grid-column: 4/5;
    -ms-grid-column: 4/5;
    grid-row: 1/2;
    -ms-grid-row: 1/2;
    padding-left: 5px;
}
p.heroText.jjj span.foxing.large {
    margin: 0;
    font-size: 14.4rem;
    line-height: 27rem;
    grid-column: 3/5;
    -ms-grid-column: 3/5;
    grid-row: 1/4;
    -ms-grid-row: 1/4;
    padding-left: 5px;
/*     position: absolute; */
}

p.heroText .foxing .cursive-period {
    font-family: serif;
    font-size: inherit;
    font-weight: normal;
}

p.heroText.jjj span.normal-text-1 {
    margin: 0;
    line-height: 9rem;
    grid-column: 1/4;
-ms-grid-column: 1/4;
    text-align: right;
    grid-row: 1/2;
-ms-grid-row: 1/2;
    margin-right: 10px;
}
p.heroText.jjj span.subtext {
    margin: 0;
    line-height: 4rem;
    grid-column: 4/5;
-ms-grid-column: 4/5;
    text-align: left;
    grid-row: 4/5;
-ms-grid-row: 4/5;
    font-size: 1.5rem;
}