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, wenn wir ein Grid-Raster für das Seitenlayout nutzen wollen.
Beispiel: einfaches responsives Grid-Layout für alle
Das Beispiel setzt 12 Grid-Spalten für ein Layout-Raster mit zwei, drei oder vier Spalten. Für die Microsoft-Browser braucht das Grid-Raster noch den ms-Browser-Präfix.
grid-template-columns: repeat(12, 1fr); -ms-grid-columns: repeat(12, 1fr);
Das klingt einfach, beherbergt aber schon den ersten bedeutenden Unterschied: Für Chrome, Firefox und Safari erzeugt grid-gap den Abstand zwischen den Spalten und erspart jegliches Gehampel mit margin, grid-gap, grid-column-gap und grid-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.
Die Syntax für die Wiederholung der Spaltenbreite weicht in den Microsoft-Browsern von der neuen Syntax ab. Nichts wirklich Bewegendes …
-ms-grid-columns: 8fr (3fr 8fr)[11];
Die 12 Spalten setzen sich zusammen aus einer ersten Spalte, gefolgt von 11 Abständen + Spalten.
Das Beispiel setzt 2, 3 und 4 Spalten in das Layout. Auf kleinen Monitoren ist das Layout linear.
- Der erste Breakpoint setzt zwei Spalten in Zeile 1.
- Der zweite Breakpoint setzt drei Spalten in Zeile 2 und jeweils 2 Spalten in Zeile 3 und 4.
- Der dritte Breakpoint setzt führt die letzten beiden Zeilen zu einer Zeile mit vier Spalten zusammen.
<div class="reframe"> <section class="col-1-7"> <h3>2 Spalten</h3> <pre>col-1-7</pre> </section> <section class="col-7-13"> <h3>2 Spalten</h3> <pre>col-7-13</pre> </section> <!-- 3 Spalten --> <section class="col-1-5"> <h3>3 Spalten</h3> <pre>col-1-5</pre> </section> <section class="col-5-9"> <h3>3 Spalten</h3> <pre>col-5-9</pre> </section> <section class="col-9-13"> <h3>3 Spalten</h3> <pre>col-9-13</pre> </section> <!-- 4 Spalten --> <section class="col-1-4"> <h3>4 Spalten</h3> <pre>col-1-4</pre> </section> <section class="col-4-7"> <h3>4 Spalten</h3> <pre>col-4-7</pre> </section> <section class="col-7-10"> <h3>4 Spalten</h3> <pre>col-7-10</pre> </section> <section class="col-10-13"> <h3>4 Spalten</h3> <pre>col-10-13</pre> </section> </div>
Das CSS für das einfache Layout-Raster ist einfach. Aber der Schreibaufwand erhöht sich, weil IE11 und alte Versionen von Edge die Inhalte nicht automatisch in die nächste Zeile platzieren, wenn das Ende einer Zeile erreicht ist.
Jeder einzelne Block muss in seine Schublade gesetzt werden, denn sonst würden die Browser alles übereinander in die erste Zeile packen. Das erhöht zwar den Schreibaufwand, das HTML bleibt allerdings schlank und ohne großen Overhead.
@media (min-width: 480px) {
.reframe {
display: -ms-grid;
display: grid;
-ms-grid-columns: repeat(12, 1fr);
-ms-grid-columns: 8fr (3fr 8fr)[11];
grid-template-columns: repeat(12, 1fr);
grid-gap: 2em;
}
.col-1-5,.col-5-9,.col-9-13,.col-1-4,.col-4-7,.col-7-10,.col-10-13 {
grid-column: 1 / span 12;
-ms-grid-column-span: 23;
}
.col-1-5 {
-ms-grid-row: 2;
}
.col-5-9 {
-ms-grid-row: 3;
}
.col-9-13 {
-ms-grid-row: 4;
}
.col-1-4 {
-ms-grid-row: 5;
}
.col-4-7 {
-ms-grid-row: 6;
}
.col-7-10 {
-ms-grid-row: 7;
}
.col-10-13 {
-ms-grid-row: 8;
}
.col-1-7 {
grid-column: 1 / span 6;
-ms-grid-column: 1;
-ms-grid-row: 1;
-ms-grid-column-span: 11;
background: ivory;
}
.col-7-13 {
grid-column: 7 / span 6;
-ms-grid-column: 13;
-ms-grid-row: 1;
-ms-grid-column-span: 11;
background: ivory;
}
}
@media (min-width: 680px) {
.col-1-5 { /** 3 Spalten **/
grid-column: 1 / span 4;
-ms-grid-column: 1;
-ms-grid-row: 2;
-ms-grid-column-span: 7;
}
.col-5-9 { /** 3 Spalten **/
grid-column: 5 / span 4;
-ms-grid-column: 9;
-ms-grid-row: 2;
-ms-grid-column-span: 7;
}
.col-9-13 { /** 3 Spalten **/
grid-column: 9 / span 4;
-ms-grid-column: 17;
-ms-grid-row: 2;
-ms-grid-column-span: 7;
}
.col-1-4 {
grid-column: 1 / span 6;
-ms-grid-column: 1;
-ms-grid-row: 3;
-ms-grid-column-span: 11;
}
.col-4-7 {
grid-column: 7 / span 6;
-ms-grid-column: 13;
-ms-grid-row: 3;
-ms-grid-column-span: 11;
}
.col-7-10 {
grid-column: 1 / span 6;
-ms-grid-column: 1;
-ms-grid-row: 4;
-ms-grid-column-span: 11;
}
.col-10-13 {
grid-column: 7 / span 6;
-ms-grid-column: 13;
-ms-grid-row: 4;
-ms-grid-column-span: 11;
}
}
@media (min-width: 1024px) {
.col-1-7 {
grid-column: 1 / 7;
-ms-grid-column: 1;
-ms-grid-column-span: span 11;
}
.col-7-13 {
grid-column: 7 / 13;
-ms-grid-column: 13;
-ms-grid-column-span: 11;
}
.col-1-4 {
grid-column: 1 / span 3;
-ms-grid-column: 1;
-ms-grid-row: 3;
-ms-grid-column-span: 5;
}
.col-4-7 {
grid-column: 4 / span 3;
-ms-grid-column: 7;
-ms-grid-row: 3;
-ms-grid-column-span: 5;
}
.col-7-10 {
grid-column: 7 / span 3;
-ms-grid-column: 13;
-ms-grid-row: 3;
-ms-grid-column-span: 5;
}
.col-10-13 {
grid-column: 10 / span 3;
-ms-grid-column: 19;
-ms-grid-row: 3;
-ms-grid-column-span: 5;
}
}
Mankos in IE11 / alte Versionen von EDGE
Es gibt viele Techniken, die es IE11 nicht gibt.
- Es gibt kein Auto-Placement, jeder Block muss individuell in ein Rasterelement platziert werden.
- Neben grid-gap fehlen die grid-template-areas, die ein Layout zusammenhängend und gut verständlich aufbauen.
.grid {
display: grid;
width: 100%;
max-width: 1440px;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 10em auto 10em;
grid-gap: 2em;
grid-template-areas: "header header header"
"main main sidebar"
"footer footer footer";
}
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;
font-size:smaller
}