html - thead - tabla con scroll

El diseño de cuadrícula CSS no funciona en IE11 incluso con prefijos

Question

Estoy usando el siguiente marcado HTML para mi cuadrícula.

<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>

El código SCSS es algo como a continuación:

.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 estoy usando el prefijo automático en mi flujo de trabajo, agrega automáticamente todas las propiedades relevantes con el prefijo -ms . Puedo confirmarlo a través del elemento de inspección.

Ahora, el problema es que este código funciona bien en Chrome, Firefox y Opera, pero cuando abro esta página en Microsoft Edge o en IE 11, todos los elementos de la cuadrícula se superponen entre sí en la primera celda. Según este sitio, estos navegadores admiten el diseño de cuadrícula CSS con el prefijo -ms . He creado un CodePen para este escenario.

Enlace CodePen

¿Por qué no funciona?

.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>

Answer 1

IE11 usa una versión anterior de la especificación Grid .

Las propiedades que está utilizando no existen en la especificación de cuadrícula anterior. Usar prefijos no hace ninguna diferencia.

Aquí hay tres problemas que veo de inmediato.

repeat()

La función repeat() no existe en la especificación anterior, por lo que IE11 no la admite.

Debe usar la sintaxis correcta, que se cubre en otra respuesta a esta publicación , o declarar todas las longitudes de fila y columna.

En vez de:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: repeat( 4, 1fr );
      grid-template-columns: repeat( 4, 1fr );
  -ms-grid-rows: repeat( 4, 270px );
      grid-template-rows: repeat( 4, 270px );
  grid-gap: 30px;
}

Utilizar:

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr 1fr;             /* adjusted */
      grid-template-columns:  repeat( 4, 1fr );
  -ms-grid-rows: 270px 270px 270px 270px;        /* adjusted */
      grid-template-rows: repeat( 4, 270px );
  grid-gap: 30px;
}

Referencia de especificaciones más antiguas: https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-repeating-columns-and-rows

span

La palabra clave span no existe en la especificación anterior, por lo que IE11 no la admite. Tendrá que usar las propiedades equivalentes para estos navegadores.

En vez de:

.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;
}

Utilizar:

.grid .grid-item.height-2x {
  -ms-grid-row-span: 2;          /* adjusted */
      grid-row: span 2;
}
.grid .grid-item.width-2x {
  -ms-grid-column-span: 2;       /* adjusted */
      grid-column: span 2;
}

Referencia de especificaciones anteriores: https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-row-span-and-grid-column-span

grid-gap

La propiedad grid-gap , así como sus formas de mano larga grid-column-gap y grid-row-gap , no existen en la especificación anterior, por lo que IE11 no las admite. Tendrás que encontrar otra forma de separar las cajas. No he leído toda la especificación anterior, por lo que puede haber un método. De lo contrario, intente márgenes.

colocación automática de elementos de cuadrícula

Hubo cierta discusión en la antigua especificación sobre la colocación automática de elementos de cuadrícula , pero la característica nunca se implementó en IE11. (La colocación automática de elementos de cuadrícula ahora es estándar en los navegadores actuales).

Entonces, a menos que defina específicamente la ubicación de los elementos de la cuadrícula, se apilarán en la celda 1,1.

Utilice las -ms-grid-row y -ms-grid-column .

• Colocación automática de CSS Grid en IE / EDGE
• CSS Grid no funciona en ie11 a pesar de los prefijos
• https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#automatic-placement-of-grid-items

Answer 2

La respuesta ya ha sido dada por Faisal Khurshid y Michael_B.
Esto es solo un intento de hacer que una posible solución sea más obvia.

Para IE11 y versiones inferiores, debe habilitar la especificación anterior de la cuadrícula en el div principal, por ejemplo, el cuerpo o como "cuadrícula" de esta manera:

.grid-parent{display:-ms-grid;}

luego defina la cantidad y el ancho de las columnas y filas como, por ejemplo, así:

.grid-parent{
  -ms-grid-columns: 1fr 3fr;
  -ms-grid-rows: 4fr;
}

finalmente necesita decirle explícitamente al navegador dónde debe colocarse su elemento (elemento), por ejemplo, así:

.grid-item-1{
  -ms-grid-column: 1;
  -ms-grid-row: 1;
}

.grid-item-2{
  -ms-grid-column: 2;
  -ms-grid-row: 1;
}

Answer 3

Michael ha dado una respuesta muy completa, pero me gustaría señalar algunas cosas que aún puede hacer para poder usar las cuadrículas en IE de una manera casi indolora.

La funcionalidad de repeat es compatible

Todavía puede usar la funcionalidad de repetición, solo se esconde detrás de una sintaxis diferente. En lugar de escribir repeat(4, 1fr) , debe escribir (1fr)[4] . Eso es. Consulte esta serie de artículos para conocer el estado actual de las cosas: https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

Apoyo a la brecha de la red

Las brechas de cuadrícula son compatibles con todos los navegadores, excepto IE. Por lo tanto, puede usar la regla at @supports para establecer las brechas de la cuadrícula condicionalmente para todos los navegadores nuevos:

Ejemplo:

.grid {
  display: grid;
}
.item {
  margin-right: 1rem;
  margin-bottom: 1rem;
}
@supports (grid-gap: 1rem) {
  .grid {
    grid-gap: 1rem;
  }
  .item {
    margin-right: 0;
    margin-bottom: 0;
  }
}

Es un poco detallado, pero en el lado positivo, no tiene que renunciar a las cuadrículas por completo solo para admitir IE.

Usar Autoprefixer

No puedo enfatizar esto lo suficiente: la mitad del dolor de las cuadrículas se resuelve solo usando el corrector automático en su paso de construcción. Escriba su CSS en una forma estándar de queja, y simplemente deje que el corrector automático haga su trabajo transformando automáticamente todas las propiedades de especificaciones más antiguas. Cuando decida que no desea admitir IE, simplemente cambie una línea en la configuración de la lista del navegador y habrá eliminado todo el código específico de IE de sus archivos creados.