web-dev-qa-db-fra.com

CSS Grid Layout ne fonctionne pas dans IE11 même avec des préfixes

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

Étant donné que j'utilise le préfixe automatique dans mon flux de travail, il ajoute automatiquement toutes les propriétés pertinentes avec le préfixe -ms. 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. Selon ce site , ces navigateurs prennent en charge la disposition en grille CSS avec le préfixe -ms. J'ai créé un CodePen pour ce scénario.

CodePen Link

Pourquoi ça ne marche 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>
htmlcssinternet-explorer-11css-grid
47
Faisal Khurshid

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 grille. L'utilisation de préfixes ne fait aucune différence.

Voici trois problèmes que je vois tout de suite.

repeat()

La fonction repeat() n'existe pas dans l'ancienne spécification et n'est donc pas prise en charge par IE11.

Vous devez utiliser la syntaxe correcte, qui est couverte dans ne autre réponse à cette publication , 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;
}

Utilisation:

.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 aux spécifications: https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-repeating-columns-and-rows

span

Le mot clé 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;
}

Utilisation:

.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 aux spécifications: https://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/#grid-row-span-and-grid-column-span

grid-gap

La propriété grid-gap, ainsi que ses formes à la main grid-column-gap et grid-row-gap, n'existent pas dans l'ancienne spécification, elles ne sont donc pas prises en charge par IE11. Vous devrez trouver un autre moyen de séparer les cases. Je n'ai pas lu l'intégralité de la spécification plus ancienne, donc il peut y avoir une méthode. Sinon, essayez les marges.

placement automatique d'élément de grille

Il y avait quelques discussion dans l'ancienne spécification sur le placement automatique d'élément de grille , mais la fonctionnalité n'a jamais été implémentée dans IE11. (Le placement automatique des éléments de la grille est désormais standard dans les navigateurs actuels).

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

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

91
Michael_B

La réponse a déjà été donnée par Faisal Khurshid et Michael_B.
Ceci est juste une tentative pour rendre plus évidente une solution possible.

Pour IE11 et les versions antérieures, vous devez activer les anciennes spécifications de la grille dans la division parent, par exemple. corps ou comme ici "grille" comme suit:

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

puis définissez la quantité et la largeur des colonnes et des lignes comme par ex. alors:

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

enfin, vous devez indiquer explicitement au navigateur où votre élément (élément) doit être placé, par exemple. ainsi:

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

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

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

La fonctionnalité repeat est supportée

Vous pouvez toujours utiliser la fonctionnalité de répétition, elle se cache simplement derrière une syntaxe différente. Au lieu d'écrire repeat(4, 1fr), vous devez écrire (1fr)[4]. C'est ça. 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/

Soutenir le fossé

Les espaces vides sont pris en charge par tous les navigateurs sauf IE. Vous pouvez donc utiliser la règle @supports pour définir les intervalles de grille conditionnellement 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 bavard, mais du côté des avantages, vous n'avez pas à abandonner les grilles pour supporter IE.

Utiliser le préfixe automatique

Je ne saurais trop insister sur ce point - la moitié de la douleur des grilles est résolue, utilisez simplement l'auto-préfixant dans votre étape de construction. Ecrivez votre code CSS en respectant les normes, et laissez simplement l’auto-préfixe se charger de la transformation automatique de toutes les anciennes propriétés de spécification. Lorsque vous décidez de ne pas prendre en charge IE, modifiez simplement une ligne de la configuration de la liste de navigation et vous aurez supprimé tout le code spécifique à IE de vos fichiers générés.

12
kumarharsh

Pour prendre en charge IE11 avec le placement automatique, j’ai converti grid en table mise en page chaque fois que j’utilisais la disposition de la grille dans une seule dimension J'ai aussi 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/

0
Thomas Webber