display: grid und IE11
Die Grid-Spezifikation wirde zwar erweitert, Microsoft Edge wurde Ende 2017 auf den neusten Stand gebracht, aber zum Glück in Hinsicht auf IE11 blieben die Konzepte stabil. So läßt sich ein einfaches Raster im Grid-Layout auch für IE11 einrichten.
Da Microsoft IE11 noch einige Jahre unterstützten wird, müssen wir uns um die alte Grid-Syntax aus dem W3C Working Draft 7 April 2011 kümmern.
Beispiel 1: einfaches responsives Grid-Layout für alle
gap (früher grid-gap) definiert den freien Platz im Raster. gap, column-gap und row-gap gab es aber in der ursprünglichen Empfehlung der Spezifikation noch nicht. Anstelle dessen brauchen IE und und alte Versionen von MS Egde zusätzliche Tracks – Zeilen und Spalten – oder der Abstand wird durch margin geregelt.
grid-template-areas machen ein Grid-Layout anschaulich und die Verteilung der Grid-Items im Raster ist gut nachvollziehbar. IE11 beherrscht auch Grid Areas noch nicht. Die Elemente müssen mit einem Index auf ihre Plätze verteilt werden, aber ein explizites Raster vereinfacht die Verteilung in IE.
@media (min-width:480px) {
.gridie {
-ms-grid-columns:6fr 1fr 6fr 1fr 6fr;
grid-template-columns: 6fr 1fr 6fr 1fr 6fr;
/** 1 2 3 4 5 **/
grid-template-areas: "cell-1 b1 cell-2 b2 cell-3"
"cell-4 b1 cell-5 b2 cell-6"
"cell-7 b1 cell-8 b2 cell-6";
}
}
Jeder einzelne Block muss in seine Schublade gesetzt werden, denn sonst würde IE alles übereinander in die erste Zeile packen.
Das erhöht zwar den Schreibaufwand und die Elemente b1 und b2, die den Abstand zwischen den Spalten regeln, sind leer. Das HTML bleibt allerdings schlank und ohne großen Overhead (jedenfalls im Vergleich zur Flut der Wrapper, die das Grid-Raster noch mit float umgesetzt haben).
.cell1 {
-ms-grid-row: 1;
-ms-grid-column: 1;
grid-area: cell-1;
}
/** b1: Leerer Track als Abstand zwischen den Spalten **/
.b1 {
-ms-grid-row: 1;
-ms-grid-column: 2;
-ms-grid-row-span: 3;
grid-area: b1;
}
…
/** Zelle 6 erstreckt sich über 2 Spalten
.cell6 {
-ms-grid-row: 2;
-ms-grid-column: 5;
-ms-grid-row-span: 2;
grid-area: cell-6;
background: orange;
color: white;
}
Beispiel 2: Mankos in IE11
- Obwohl es kein Auto-Placement in IE11 gibt und jeder Block individuell in ein Rasterelement platziert werden muss, ist es dennoch relativ einfach, ein Grid-Raster für IE11 nachzuziehen.
- Zwar fehlt IE11 das intuitive grid-template-areas, die ein Layout zusammenhängend und gut verständlich aufbauen, aber grid-template-areas helfen beim nachbauen des Rasters.
.gridie {
display: -ms-grid;
display: grid;
}
@media (min-width:480px) {
.gridie {
-ms-grid-columns:6fr 1fr 6fr 1fr 6fr;
grid-template-columns: 6fr 1fr 6fr 1fr 6fr;
/** 1 2 3 4 5 **/
grid-template-areas: "cell-1 b1 cell-2 b2 cell-3"
"cell-4 b1 cell-6 cell-6 cell-6"
"cell-7 b1 cell-6 cell-6 cell-6";
}
.cell1 {
-ms-grid-row: 1; -ms-grid-column: 1;
grid-area: cell-1;
}
.b1 {
-ms-grid-row: 1; -ms-grid-column: 2; -ms-grid-row-span: 3;
grid-area: b1;
}
.cell2 {
-ms-grid-row: 1; -ms-grid-column: 3;
grid-area: cell-2;
}
.b2 {
-ms-grid-row: 1; -ms-grid-column: 4;
grid-area: b2;
}
.cell3 {
-ms-grid-row: 1; -ms-grid-column: 5;
grid-area: cell-3;
}
.cell4 {
-ms-grid-row: 2; -ms-grid-column: 1;
grid-area: cell-4;}
.cell6 {
-ms-grid-row: 2; -ms-grid-column: 3;
-ms-grid-row-span: 2;-ms-grid-column-span: 3;
grid-area: cell-6;
}
.cell7 {
-ms-grid-row: 3; -ms-grid-column: 1;
grid-area: cell-7;
}
}
Für leere Zellen reserviert die moderne Grid-Syntax das Stop-Zeichen ".". Nicht IE11 – wer hätte das erraten?
Fazit: Das CSS für IE11 verursacht Extrazeilen im CSS. Gegenüber anderen Grid-Systemen bleibt dafür das HTML sauber und braucht keine obsoleten Wrapper.
Die volle Flexibilität des Grids nutzen
IE11 verhindert also, dass wir das einfachste aller Grid-Layouts nutzen können, das ohne einen einzige Breakpoint eine Blog-Seite oder eine Produktübersicht umsetzt.
.options-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(9em, 1fr));
grid-gap: 2vw;
gap: 2vw;
font-size:smaller
}