CSS Grid – Layout in vier einfachen Schritten

Grid-Layout bei Sprachausgabe / Tastatur

Die ideale Reihenfolge der Elemente ist diejenige, die auf dem kleinsten Monitor angezeigt werden soll. Auf großen Monitoren wollen wir die Elemente beliebig platzieren. Keine der klassischen Methoden der Positionierung – gleich ob table, float oder display:inline - kann diese Anforderung erfüllen.

Die Platzierung der Elemente im Grid hat keinen Einfluss auf die Reihenfolge bei der Sprachausgabe und der Navigation mit der Tastatur. display:grid trennt Inhalt und Layout ohne großen Aufwand. Die logische Reihenfolge der Inhalte bleibt bestehen – ein wichtiger Unterschied zu HTML-Tabellen.

Grid-Zellen, Tracks und Areas

Ein Grid-Layout wird anhand von gedachten horizontalen und vertikalen Linien oder durch namentlich angesprochene Grid-Bereiche (grid-template-areas) aufgezogen.

Ein Grid besteht aus Zeilen und Spalten, hier z.B. drei Zeilen, drei Spalten:

@media (min-width: 600px) {
	.grid-block {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr;
		width: 600px;
		height: 600px;
	}
}

grid-template-columns bzw. grid-template-rows legt die Höhe und Breite der Zeilen fest. fr (fraction, Anteil) ist nur eine Möglichkeit.

Grid-Zellen, Grid-Zeilen, Grid-Spalten

Grid-Zellen sind die Schnittpunkte von Zeilen und Spalten. Eine Zelle wird von vier Grid-Linien eingegrenzt und ist die kleinste Einheit in einem Grid-Container.

.bluebox {
   grid-column-start: 2;
   grid-column-end: 3;
   grid-row-start: 2;
   grid-row-end: 3;
}

Grid Row – Grid-Zeilen sind der Raum zwischen zwei aufeinander folgenden horizontalen Linien. Als Kurzschrift anstelle von grid-column-start und grid-column-end:

.bluebox {
   grid-column: 1/4; /** von Linie 1 bis Linie 4 **/
   grid-row: 1/2;    /** von Linie 1 bis Linie 2 **/
}

Grid-Spalten sind der Raum zwischen zwei benachbarten senkrechten Linien (Grid-Track ist der allgemeine Name sowohl für Grid-Spalten als auch für Grid-Zeilen).

.bluebox {
   grid-column: 2/3;
   grid-row: 1/4;
}

Grid Areas sind Bereiche, die von vier Grid-Linien eingegrenzt sind und aus einem, zwei, vier oder mehr benachbarten Zellen bestehen (Grid-Zellen sind also auch gleichzeitig Grid-Areas). Für ein Grid-Layout sind grid-template-areas mit Namen für die Grid-Bereiche mit einen besseren Wiedererkennungswert ausgestattet.

.elem {
	grid-area: banner;
}

Einfaches Beispiel – Layout mit display : grid

Der Container bekommt die Eigenschaft display: grid oder display: inline-grid.

display: grid;

           Breite der Spalten (z.B. als px, % oder fr)
                        +
                        |
grid-template-columns: 32% 32% 32%; 

      +-- Abstand der Spalten und Zeilen
      |
gap: 10px;

grid-template-columns und grid-template-rows legen das Raster an. Die Breite der Spalten bzw. Höhe der Zeilen kann als absolute Länge (z.B. in Pixel oder em), als Prozentwert oder als Anteil am freien Platz des Grids angegeben werden.

column-gap und row-gap bestimmen den Abstand zwischen den Spalten bzw. den Zeilen. gap ist die Kurzschrift für column-gap und row-gap (in älteren Version noch grid-gap, grid-column-gap, grid-row-gap).

.elem1 {
   grid-row: 1;
   grid-column: 1 / 3; // Element von Linie 1 bis Linie 3
}

Jedem Element im Grid-Container wird ein beliebiger Platz sowie eine Breite und Höhe (über Spalten und Zeilen) zugewiesen.

Grid-Items platzieren

Zellen ohne Angabe einer Position und Spannbreite / Spannhöhe werden automatisch am Ende des Rasters eingefügt. Wird einem Grid-Item ein Platz zugewiesen, der bereits belegt ist, liegt das zuletzt definierte Grid-Element über dem bereits vorhandenen Element.

grid-template-areas

Eleganter und intuitiver läßt sich das Grid mit grid-template-areas anlegen und mit Inhalt füllen. Anstelle der Linien treten Namen. In die grid-template-areas werden die Inhalte platziert.

.grid-raster {
   grid-template-areas: "header    header header"
                        "thumbnail text   links "
                        ".         text   .     ";
}

h3 {
	grid-area: header;
}
.article-img {
	grid-area: thumbnail;
}

Browser-Support für Grid

Grid ist zuverlässig in allen immergrünen modernen Browser verankert: In Chrome ab Version 57, in Microsoft Edge ab Okt 2017. Safari hat CSS Grid mit Version 10.1 in Gang gesetzt, Firefox mit Version 52.

IE10 und IE11 boten zwar Support für Grid, aber in einer veralteten Syntax, und unterstüzten grid-template-areas gar nicht. Auch wenn es noch einen Club der eisernen IE-Nutzer geben sollte: Sie bekommen am besten ein lineare Layout.