O CSS Grid Layout não funciona no Edge e no IE 11, mesmo com o prefixo -ms
Estou usando a seguinte marcação HTML para minha grade.
<section class="grid">
<article class="grid-item width-2x height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x">....</article>
<article class="grid-item height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x height-2x">....</article>
</section>
O código SCSS é algo como abaixo:
.grid {
display: grid;
grid-template-columns: repeat( 4, 1fr );
grid-gap: 30px;
align-items: start;
.grid-item {
&.height-2x {
grid-row: span 2;
}
&.width-2x {
grid-column: span 2;
}
}
}
Como estou usando o prefixo automático no meu fluxo de trabalho, ele adiciona automaticamente todas as propriedades relevantes com-ms
prefixo. Posso confirmar via elemento de inspeção.
Agora, o problema é que esse código funciona perfeitamente no Chrome, Firefox e Opera, mas quando abro esta página no Microsoft Edge ou no IE 11, todos os itens da grade se sobrepõem na primeira célula. De acordo comesse site esses navegadores suportam o layout CSS Grid com-ms
prefixo. Eu criei um CodePen para este cenário.
Por que não está funcionando?
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
-ms-grid-rows: (270px)[4];
grid-template-rows: repeat(4, 270px);
grid-gap: 30px;
}
.grid .grid-item {
background-color: #000;
color: #fff;
text-align: center;
line-height: 270px;
}
.grid .grid-item.height-2x {
-ms-grid-row: span 2;
grid-row: span 2;
}
.grid .grid-item.width-2x {
-ms-grid-column: span 2;
grid-column: span 2;
}
<section class="grid">
<article class="grid-item width-2x height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x">....</article>
<article class="grid-item height-2x">....</article>
<article class="grid-item">....</article>
<article class="grid-item">....</article>
<article class="grid-item width-2x height-2x">....</article>
</section>