La disposition en grille CSS ne fonctionne pas dans IE11, même avec des préfixes

Question

J'utilise le balisage HTML suivant pour ma grille.

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

Le code SCSS est quelque chose comme ci-dessous :

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

Comme j'utilise le préfixeur automatique dans mon flux de travail, il ajoute automatiquement toutes les propriétés pertinentes avec les éléments suivants -ms préfixe. Je peux le confirmer via l'élément inspect.

Le problème est que ce code fonctionne parfaitement dans Chrome, Firefox et Opera, mais lorsque j'ouvre cette page dans Microsoft Edge ou dans IE 11, tous les éléments de la grille se chevauchent dans la première cellule. D'après ce site ces navigateurs prennent en charge la grille CSS avec -ms préfixe. J'ai créé un CodePen pour ce scénario.

Lien vers le CodePen

Pourquoi cela ne fonctionne-t-il pas ?

.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 utilise un ancienne version de la spécification Grid .

Les propriétés que vous utilisez n'existent pas dans l'ancienne spécification de la grille. L'utilisation de préfixes ne fait aucune différence.

Voici trois problèmes que je vois d'emblée.

---

repeat()

Le site repeat() n'existe pas dans l'ancienne spécification, elle n'est donc pas prise en charge par IE11.

Vous devez utiliser la syntaxe correcte, qui est traitée dans la rubrique une autre réponse à ce message ou déclarer toutes les longueurs de lignes et de colonnes.

Au lieu 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;
}

Utilisez :

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

Ancienne référence de la spécification : https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-repeating-columns-and-rows

---

span

Le site span n'existe pas dans l'ancienne spécification, il n'est donc pas pris en charge par IE11. Vous devrez utiliser les propriétés équivalentes pour ces navigateurs.

Au lieu 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;
}

Utilisez :

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

Ancienne référence de la spécification : https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-row-span-and-grid-column-span

---

grid-gap

Le site grid-gap propriété, ainsi que ses formes de longue main grid-column-gap et grid-row-gap n'existent pas dans l'ancienne spécification, ils ne sont donc pas pris en charge par IE11. Vous devrez trouver un autre moyen de séparer les boîtes. Je n'ai pas lu l'intégralité de l'ancienne spécification, il y a donc peut-être une méthode. Sinon, essayez les marges.

---

placement automatique des éléments de la grille

Il y a eu quelques discussion dans l'ancienne spécification sur le placement automatique des éléments de la grille mais cette fonctionnalité n'a jamais été mise en œuvre dans IE11. (Le placement automatique des éléments de la grille est désormais la norme dans les navigateurs actuels).

Ainsi, à moins que vous ne définissiez spécifiquement le placement des éléments de la grille, ils s'empileront dans la cellule 1,1.

Utilisez le -ms-grid-row et -ms-grid-column propriétés.

• Placement automatique de la grille CSS dans IE/EDGE
• La grille CSS ne fonctionne pas dans ie11 malgré les préfixes
• https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#automatic-placement-of-grid-items

Answer 2

Michael a donné une réponse très complète, mais j'aimerais souligner quelques points que vous pouvez encore faire pour pouvoir utiliser les grilles dans IE d'une manière presque indolore.

Le site repeat la fonctionnalité est prise en charge

Vous pouvez toujours utiliser la fonctionnalité de répétition, mais elle se cache derrière une syntaxe différente. Au lieu d'écrire repeat(4, 1fr) vous devez écrire (1fr)[4] . C'est tout. Voir cette série d'articles pour l'état actuel des choses : https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/

Prise en charge du grid-gap

Les écarts de grille sont pris en charge dans tous les navigateurs, sauf IE. Vous pouvez donc utiliser la fonction @supports at-rule pour définir les écarts de grille de manière conditionnelle pour tous les nouveaux navigateurs :

Exemple :

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

C'est un peu verbeux, mais le bon côté des choses, c'est qu'il n'est pas nécessaire d'abandonner complètement les grilles pour supporter IE.

Utiliser un autoréflecteur

Je ne saurais trop insister sur ce point : la moitié de la difficulté des grilles est résolue par l'utilisation d'un autoréflecteur dans votre étape de construction. Écrivez votre CSS d'une manière conforme aux normes, et laissez l'autoréfixeur faire son travail en transformant automatiquement toutes les propriétés des anciennes spécifications. Lorsque vous décidez de ne plus supporter IE, il suffit de changer une ligne dans la configuration de la liste des navigateurs et vous aurez supprimé tout le code spécifique à IE de vos fichiers construits.

Answer 3

La réponse a déjà été donnée par Faisal Khurshid et Michael_B.
Il s'agit simplement d'une tentative pour rendre une solution possible plus évidente.

Pour IE11 et les versions inférieures, vous devez activer l'ancienne spécification de la grille dans la division parente, par exemple body ou comme ici "grid" :

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

puis définissez la quantité et la largeur des colonnes et des lignes comme par exemple ainsi :

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

Enfin, vous devez indiquer explicitement au navigateur où votre élément (item) doit être placé, par exemple de la manière suivante :

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

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

Answer 4

Pour supporter IE11 avec l'auto-placement, j'ai converti grid à table à chaque fois que j'ai utilisé la mise en page de la grille dans 1 seule dimension . J'ai également utilisé margin au lieu de grid-gap .

Le résultat est le même, voyez comment vous pouvez le faire ici https://jsfiddle.net/hp95z6v1/3/