0

Cuando coloco en css esta linea de codigo me marca error en GRID y el GRID-TEMPLATE-COLUMNS, me dice que no es soportado por internet explorer, me da dos soluciones pero tampoco funciona que es -ms-display: grid; (esta parte si funciona) y la otra -ms-grid-column: 1fr 1fr; y esto no funciona, he probado de varia maneras y no funciona. Lo marca en rojo Visual Studio y no guarda los cambios. Que puedo hacer?

.diseño {
    display: grid;    
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.diseño {
    display: grid;    
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
2
  • Buen día, el parámetro es -ms-grid-columns te hace falta una "s" tu pusiste -ms-grid-column Commented el 19 feb. 2022 a las 4:54
  • Aún con s me sigue marcando el error en grid-template-columns q no es soportado x explorer Commented el 19 feb. 2022 a las 12:28

1 respuesta 1

-1

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>

3
  • ante todo muchas gracias por tu respuesta y no no quiero agregar soporte a IE lo que pasa q al escribir el codigo VS me marca el error que falta eso y no me deja guardar cambios ni seguir adelante con el formulario Commented el 19 feb. 2022 a las 13:46
  • @sergiomerlo Si te marca algún error relacionado a Unexpected character es por la ñ o caracteres especiales como te dije, pero dudo mucho que no te deje guardarlo a menos que tengas una extensión que te obligue a poner los prefijos para un Cross-Browser compatibility, de todas maneras, puedes indicarme por acá el error que te marca.
    – Rodrigo
    Commented el 19 feb. 2022 a las 14:58
  • ESE ES EL ERROR QUE ME MARCA EN GRID-TEMPLATE COLUMNS YSIMILAR EN GRID ***** specifies, as a space-separated track list, the line names and track sizing functions of the grid. Syntax: none | <track-list> | <auto-track-list> | subgrid <line-name-list>? MDN Reference 'grid-template-columns' is not supported by Internet Explorer. Add '-ms-grid-columns' to support Internet Explorer 10+ Commented el 19 feb. 2022 a las 15:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.