▷CSS: display: grid y / o -ms-grid ✔️ Foro Ayuda 【 2024 】

Luego de investigar con expertos en la materia, programadores de diversas áreas y profesores hemos dado con la respuesta a la pregunta y la dejamos plasmada en esta publicación.

Solución:

Transformar la nueva sintaxis de diseño de CSS Grid en IE obsoletos es realmente un desafío. No se trata solo de agregar algunos prefijos de proveedores.

IE tiene un soporte muy limitado de lo que está presente en la nueva versión de CSS Grid Layout. No hay soporte de IE para

auto-colocación y selección de su flujo (grid-auto-flow Propiedad CSS);
columnas / filas repetidasrepeat función y algunos valores especiales como auto-fill y auto-fit). En algunos casos, esto significa que solo tendrá que reemplazar con valores explícitos, como en su caso, puede reemplazar grid-template-columns: repeat(4, 1fr) con -ms-grid-columns: 1fr 1fr 1fr 1fr y esto funcionará perfectamente. Pero si tienes algo como grid-template-columns: repeat(auto-fill, 1fr) es imposible implementar esto en IE;
huecos de celdas de cuadrículagrid-row-gap, grid-column-gap, grid-gap Propiedades CSS). Los huecos se pueden falsificar utilizando pistas de cuadrícula adicionales;
pistas generadas automáticamentegrid-auto-columns, grid-auto-rows Propiedades CSS);
áreas de cuadrícula nombradas (grid-area, grid-template-areas Propiedades CSS).

Solo tienes que olvidarte de estas posibilidades para IE.

Además, algunos valores de las propiedades de IE compatibles no son compatibles

Autocolocación

No hay un comportamiento de colocación automática en la implementación de IE. Esto significa que debe colocar todo en lugar de utilizar la capacidad de colocación automática de la cuadrícula.

Si no coloca los elementos, se apilarán en la primera celda de la cuadrícula. Eso significa que debe establecer una posición explícitamente para cada elemento de la cuadrícula o residirá en la primera celda. Si tiene un marcado como este:

.wrapper 
  display: -ms-grid;
  display: grid;
  grid-gap: 10px;
  -ms-grid-columns: 50px 50px;
  grid-template-columns: 50px 50px;
  -ms-grid-rows: 50px 50px;
  grid-template-rows: 50px 50px;
  background-color: #fff;
  color: #444;


.box 
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;


  A
  B
  C
  D

Verás algo esto en IE

Entonces, básicamente, tiene dos opciones (metodologías) al desarrollar CSS Grid para IE (si sabe que el diseño en su caso se puede transformar):

Genere un marcado diferente para el navegador IE y otros navegadores. En este caso, no le importa la similitud de marcado (por cierto, su valor de grid-template-rows: repeat(150px, 50px) no es válido, así que supongo que querías grid-template-rows: 150px 50px). Demo para tu caso

.container 
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 150px 50px;
  grid-gap: 1vw;
  
  display: -ms-grid;
  /* also faking 1vw grid-gap */
  -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
  /* also faking 1vw grid-gap */
  -ms-grid-rows: 150px 1vw 50px;


.grid-item 
  /* style just for demo */
  background-color: yellow;


/* Explicit placement for IE */
/* Omitting default value of -ms-grid-column: 1 and -ms-grid-row: 1 where possible */
.grid-item:nth-child(2) 
  -ms-grid-column: 3;


.grid-item:nth-child(3) 
  -ms-grid-column: 5;


.grid-item:nth-child(4) 
  -ms-grid-column: 7;


.grid-item:nth-child(5) 
  -ms-grid-row: 3;


.grid-item:nth-child(6) 
  -ms-grid-row: 3;
  -ms-grid-column: 3;


.grid-item:nth-child(7) 
  -ms-grid-row: 3;
  -ms-grid-column: 5;


.grid-item:nth-child(8) 
  -ms-grid-row: 3;
  -ms-grid-column: 7;

Genere un marcado muy similar para los navegadores IE. En este caso, el marcado para todos los navegadores será muy similar. Esto podría ser más fácil de mantener porque no debería preocuparse por los diferentes enfoques. Demo para su caso:

.container 
  display: -ms-grid;
  display: grid;
  /* also faking 1vw grid-gap */
  -ms-grid-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
  grid-template-columns: 1fr 1vw 1fr 1vw 1fr 1vw 1fr;
  /* also faking 1vw grid-gap */
  -ms-grid-rows: 150px 1vw 50px;
  grid-template-rows: 150px 1vw 50px;


.grid-item 
  /* style just for demo */
  background-color: yellow;


.grid-item:nth-child(2) 
  -ms-grid-column: 3;
  grid-column: 3;


.grid-item:nth-child(3) 
  -ms-grid-column: 5;
  grid-column: 5;


.grid-item:nth-child(4) 
  -ms-grid-column: 7;
  grid-column: 7;


.grid-item:nth-child(5) 
  -ms-grid-row: 3;
  grid-row: 3;


.grid-item:nth-child(6) 
  -ms-grid-row: 3;
  grid-row: 3;
  -ms-grid-column: 3;
  grid-column: 3;


.grid-item:nth-child(7) 
  -ms-grid-row: 3;
  grid-row: 3;
  -ms-grid-column: 5;
  grid-column: 5;


.grid-item:nth-child(8) 
  -ms-grid-row: 3;
  grid-row: 3;
  -ms-grid-column: 7;
  grid-column: 7;

Tu display La regla debe estar estructurada correctamente. Lo que tienes no es válido.

display: grid -ms-grid;

También tu grid-template-rows la regla no es válida. Se supone que el primer argumento es un número entero que especifica el número de repeticiones.

grid-template-rows: repeat(150px, 50px);

Además, no creo repeat() La notación existía en las especificaciones más antiguas. Parece que se introdujo en la especificación actual, por lo que IE no lo admitiría.

-ms-grid-columns: repeat(4, 1fr);
-ms-grid-rows: repeat(150px, 50px);

Por último, es mejor poner las propiedades oficiales (W3C) después de las versiones prefijadas para que tengan prioridad en la cascada (más detalles).

Prueba esto:

.container 
  display: -ms-grid; 
  display: grid;

  -ms-grid-columns: 1fr 1fr 1fr 1fr;           
  grid-template-columns: repeat(4, 1fr);

  -ms-grid-rows: 150px 50px;
  grid-template-rows: 150px 50px;

  -ms-grid-gap: 1vw;
  grid-gap: 1vw;

Eres capaz de añadir valor a nuestro contenido dando tu experiencia en las críticas.

¡Haz clic para puntuar esta entrada!

(Votos: 0 Promedio: 0)

CSS: display: grid y / o -ms-grid

Solución:

Autocolocación

Utiliza Nuestro Buscador

Preguntas Relacionadas: