CSS Grid – Beispiel (mit IE Syntax)

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";
    }
}

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;
   font-size:smaller
}