Zum Glück wurde die Spezifikation zwar erweitert, aber die Konzepte blieben stabil. So läßt sich ein einfaches Raster im Grid-Layout auch für Internet Explorer und Edge einrichten.
Wir können zwar davon ausgehen, dass Microsoft die Implementierung des Grid in Edge auf den neusten Stand nachzieht, wohl kaum aber für IE 11. Da Microsoft IE11 noch einige Jahre unterstützten wird, müssen wir uns um die alte 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, 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 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. Ein wenig mehr Schreibaufwand, weil IE10, IE11 und 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.
Dennoch hält sich der Schreibaufwand für das CSS in Grenzen, das HTML bleibt schlank und ohne jeglichen 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 Microsoft-Browsern
Es gibt viele Techniken, die es in den Microsoft-Browsern 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";
}