CSS GRID Tipps

Tipps und Beispiele für Grid-Layouts

CSS Grid ist genial einfach, aber gleichzeitig voller Funktionen und Optionen. Im Vordergrund steht die Frage: Was passiert mit IE11, der CSS Grid nur in einer älteren Syntax und mit -ms-Präfix unterstützt? Am Ende fehlen in IE einige der Eigenschaften des Grids, die das Grid so komfortabel und leichtfüßig machen.

Fallback für IE11

Mit der älteren Syntax für IE11 und seinen Vorgänger ist es durchaus möglich, Internet Explorer 10/11 mit Präfix mitzuziehen, allerdings geht dabei die Übersichtlichkeit des CSS verloren.

Ein Auto-Präfixer zieht IE11 nicht nach, denn viele Bezeichnungen haben sich geändert, viele neue sind hinzugekommen.

  1. Kein auto-placement. Jede Zelle des Grids muss anhand ihrer Linien platziert werden
  2. Die größte Lücke ist grid-template-areas, für das IE11 kein Äquivalent hat.
  3. Kein grid-gap – das kann aber durch margin ersetzt werden
  4. Anstelle von Start- und Endlinien braucht IE11 die Startlinie und die Zahl der Track, über die sich eine Zelle erstreckt.
  5. IE10 / IE11 platzieren HTML main nicht im Grid (OH-HA). Das main-Tag muss mit einem div role="main" oder section role="main" ersetzt werden.

Für Webseiten, bei denen IE11 nur einen geringen Anteil an der Besucherzahl hat, kann IE11 u.U. mit einem einfacheren Layout abgespeist werden.

Sowohl display: flex als auch display: table werden von display: grid überschrieben, genauso wie andere Angaben zur Positionierung: float und clear, inline-block, vertical-align,

Zellen gleicher Höhe

Genauso wie bei display:flex erstrecken sich die Zellen einer Zeile immer auf die Höhe der höchsten Zelle, gleich wie hoch der Inhalt ist.

Aber während flex nur die Zellen einer Zeile auf dieselbe Höhe bringt, hievt display: grid alle Zellen auf das Maß der höchsten Zelle (falls genug Platz vorhanden ist).

.grid {
    grid-template-columns: 2fr 1fr 1fr;
    grid-auto-rows: 1fr;
}
cell 1
Jujubes lemon drops pastry. Topping chupa chups marzipan wafer soufflé biscuit sugar plum gummi bears. Dessert croissant caramels croissant sesame snaps tart.
cell 2
cell 3
cell 4
cell 5
cell 6
cell 7

In IE10/IE11 funktioniert grid-auto-rows: 1fr nicht. Zwar zieht auch IE11 alle Zellen einer Zeile auf dieselbe Höhe, aber nicht alle Zellen eines Grids.

Einfaches Rezept für den Nachzug von IE11

grid-template-areas setzen ein Grid-Layout übersichtlich in Kraft.

.demogrid { 
    display: -ms-grid;
    display: grid;
	
    -ms-grid-columns: 2fr 1fr 1fr;
    grid-template-columns: 2fr 1fr 1fr; 
    grid-template-areas:    "cell-1 cell-2 cell-2"
                            "cell-3 cell-4 cell-5"
                            "cell-6 cell-6 cell-7";
    grid-auto-rows: 1fr;
}

Für die modernen Browser reicht schon die Zuweisung der Elemente zu einer Grid-Template-Area.

.cell-1 { 
    -ms-grid-row: 1; 
    -ms-grid-column: 1; 
    -ms-grid-column-span: 1; 
    background: brown; 
    grid-area: cell-1;
}

.cell-2 { 
    -ms-grid-row: 1; 
    -ms-grid-column: 2; 
    -ms-grid-column-span: 2;
    background: green; 
    grid-area: cell-2;
}

.cell-3 { 
    -ms-grid-row: 2; 
    -ms-grid-column: 1; 
    -ms-grid-column-span: 1;
    background: cyan; 
    grid-area: cell-3;
}

-ms-grid-column-span: 1 ist default und optional.

Leere Grid-Zellen

Leere Zellen entstehen durch einen Punkt ".".

cell 1
cell 2

cell 3
cell 4
cell 5
grid-template-areas: "cell-1 cell-2 cell-3"
                     ".      cell-4 cell-4"
                     "cell-5 cell-5 cell-5";

Leere Zeilen in einem GRID

Der am wenigsten invasive Weg zu leeren Zeilen ist ein leeres Tag, z.B. ein leeres b-Tag. Das b-Tag hat keine semantische Bedeutung mehr, ist kurz und knackig und kann ans Ende des Grids als letztes Element eingesetzt werden.

cell 1
cell 2
cell 3
cell 4
cell 5
cell 6
cell 7
cell 8
cell 9
grid-template-areas: "cell-1 cell-2 cell-3"
                     "b      b      b"
                     "cell-4 cell-5 cell-6"
                     "cell-7 cell-8 cell-9";

Das leere b-Tag mag als nicht ganz 100% korrektes HTML erscheinen – ist aber immer noch besser als Abstandhalter als die zahllosen Wrapper-Tags.

Für IE11 braucht b display:block.

.emptyrows b {
    -ms-grid-row: 2; 
    -ms-grid-column: 1; 
    -ms-grid-column-span: 3;
    display: block;
}

IE 11: Kein support für supports

Zwar kennt IE11 die supports-Regel noch nicht und wird sie auch nicht mehr lernen, aber einzelne Eigenschaften können ausschließlich IE11 zugeordnet werden.

_:-ms-fullscreen, :root .IE11-only-class { 

  /* IE11 specific properties */

}