CSS Grid – Beispiel (mit IE Syntax)

display: grid mit IE: Schiffe versenken

Internet Explorer war der erste Browser, der das native Grid aus einem frühen Vorschlag des W3c implementierte. Die Implementierung des GRID-Layouts in IE10, IE11 und alter Versionen von Microsoft Edge basiert aber immer noch auf der Spezifikation von 2011.

In der Zwischenzeit erweiterte das W3C die Spezifikation, aber die Implementierung in IE11 sitzt festgemauert in der ursprünglichen Empfehlung. display grid mit IE11 fühlt sich an wie Schiffe versenken.

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

grid-gap definiert den freien Platz im Raster. 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 – 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";
    }
}
cell 1
cell 2
cell 3
cell 4
cell 5
cell 6
cell 7
cell 8

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.
cell 1
cell 2
cell 3
cell 4
cell 6
cell 7
.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;
   font-size:smaller
}
Waschmaschine

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Kochen

Maecenas sed nunc et erat ornare fringilla accumsan in massa.

Laken

Duis lacinia tempor nulla in mollis.

Vivamus iaculis aliquet consequat.

Mikrowelle

Donec nibh ante, convallis ut rhoncus vel, molestie quis magna.

Handy

Pellentesque condimentum sapien at malesuada sodales.

Einkaufen

In tincidunt interdum arcu sed tincidunt.

Kaffeemaschine

Morbi nec accumsan lacus, eget sodales dolor.

Fernseher

Nam sit amet odio massa.

Wasserkocher

Vivamus imperdiet augue quis justo feugiat elementum. Nunc condimentum ex at feugiat posuere.

Staubsauger

Integer sit amet quam sed ante vestibulum vulputate. Fusce condimentum, enim vel suscipit finibus.

123456789101112 357911131517192121