La disposition de la grille CSS ne fonctionne pas dans Edge et IE 11 même avec le préfixe-ms
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;
}
}
}
puisque j'utilise le préfixe automatique dans mon workflow, il ajoute automatiquement toutes les propriétés pertinentes avec le préfixe -ms . Je peux le confirmer via inspect element.
maintenant, le problème est ce code fonctionne très bien dans Chrome, Firefox et Opera, mais quand j'ouvre cette page dans Microsoft Edge ou dans IE 11 tous les éléments de la grille se chevauchent à la première cellule. Selon ce site ces navigateurs prennent en charge la disposition de la grille CSS avec le préfixe -ms . J'ai créé un CodePen pour ce scénario.
CodePen Lien
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>2 réponses
de Pointe et IE11 utiliser un ancienne version de la Grille des spécifications .
mise à jour:
- Edge est maintenant courant . Le problème décrit dans la question ne s'applique plus.
- le problème persiste dans IE11 parce qu'il soutient une ancienne version de la spécification de grille .
- Chrome, Safari, Firefox et Opera utiliser la version actuelle de la spécification de grille .
le problème avec votre code est que vous utilisez des propriétés qui n'existent pas dans l'ancienne grille spec. L'utilisation de préfixes ne fait aucune différence.
Voici trois problèmes que je vois tout de suite.
repeat()
La notation repeat() n'existe pas dans les anciennes spécifications, elle n'est donc pas supportée par IE11. Vous devez écrire dans toutes les longueurs de ligne et de colonne pour ces navigateurs.
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;
}
Utiliser:
.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 spec: 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 les anciennes spécifications, il n'est donc pas supporté 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;
}
Utiliser:
.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 spec: 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 longues grid-column-gap et grid-row-gap , n'existent pas dans les anciennes spécifications, elles ne sont donc pas supportées par IE11. Vous devez trouver un autre moyen de séparer les boîtes. Je n'ai pas lu toutes les spécifications, donc il y a peut-être une méthode. Sinon, essayez de marges.
la réponse a déjà été donnée par Faisal Khurshid et Michael_B.
Ce n'est qu'une tentative pour rendre une solution possible plus évidente.
pour IE11 et ci-dessous vous devez activer l'ancienne spécification de grid dans le div parent par exemple corps ou comme ici "grid" comme ainsi:
.grid-parent{display:-ms-grid;}
définir ensuite le montant et la largeur des colonnes et des lignes comme par exemple so:
.grid-parent{
-ms-grid-columns: 1fr 3fr;
-ms-grid-rows: 4fr;
}
enfin, vous devez dites explicitement au navigateur où votre élément doit être placé, par exemple comme ceci:
.grid-item{
-ms-grid-column: 1;
-ms-grid-row: 1;
}
.grid-item-2{
-ms-grid-column: 2;
-ms-grid-row: 1;
}