Primero que nada, no agregues caracteres especiales (acentos, ñ, etc) a código JS o CSS, primero porque un navegador que no soporte esos caracteres hará que tu estilo se rompa y segundo porque es una mala práctica.
Ahora, ni -ms-display
ni -ms-grid-colum
son correctos, primero porque la propiedad display
es una propiedad universal, el sufijo cambia en el valor de esta y luego porque -ms-grid-columns
no funciona como funcionaría hoy en día un grid-template-columns
.
Por último, no sé por qué quieres agregar soporte para IE, hoy en día ya se ha eliminado por completo y nadie (o casi nadie) lo usa, Microsoft le quitó el soporte e incluso Windows 7 ya viene con Edge (el nuevo navegador basado en WebKit), todos los navegadores son modernos y ya no te tienes que estar preocupando por el soporte para IE, ya que, no es necesario.
.grid {
display: -ms-grid;
display: grid;
-ms-grid-columns: 100px minmax(200px, 500px) 1fr;
grid-template-columns: 100px minmax(200px, 500px) 1fr;
}
.cell {
border: 1px solid #000;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
}
.small {
-ms-grid-column: 1;
grid-column: 1;
}
.minmax {
-ms-grid-column: 2;
grid-column: 2;
}
.fr {
-ms-grid-column: 3;
grid-column: 3;
}
<div class="grid">
<div class="cell small">
<p>100px</p>
</div>
<div class="cell minmax">
<p>minmax(200px, 500px)</p>
</div>
<div class="cell fr">
<p>1fr</p>
</div>
</div>
-ms-grid-columns
te hace falta una "s" tu pusiste-ms-grid-column