CSS, HTML und Javascript mit {stil}

CSS Grid in vier einfachen Schritten

CSS GRID – Layout-Raster für die Positionierung

CSS Grid ist ein Raster von gedachten Linien für das Layout von Webseiten in Zeilen und Spalten. Die Elemente innerhalb des Grids werden anhand eines Tabellen-ähnlichen Rasters ausgerichtet und verteilt.

Die ideale Reihenfolge der Elemente ist diejenige, die auf dem kleinsten Monitor angezeigt werden soll. Auf großen Monitoren wollen wir dann die Elemente beliebig platzieren. Keine der klassischen Methoden der Positionierung – gleich ob table, float oder display: flex – konnte diese Anforderung ohne Weiteres 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.

Grid-Zellen, Tracks und Areas

Ein einfaches Grid-Layout wird anhand von gedachten horizontalen und vertikalen Linien durch wenige kurze Eigenschaften beschrieben. Die Nummern der Linien legen fest, wo ein Bereich beginnt bzw. endet.

CSS Grid: Layout-Bereich durch gedachte Linien unterteilt 1 2 3 4 1 2 3
Grid Cell / Zelle
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.
Grid Row / Zeile
Grid-Zeilen sind der Raum zwischen zwei aufeinander folgenden horizontalen Linien.
Grid Column / Spalte
Grid-Spalten sind der Raum zwischen zwei benachbarten senkrechten Linien.
Grid Track
Track ist der allgemeine Name sowohl für Grid-Spalten als auch für Grid-Zeilen.
Grid Area / Bereich
Grid Area ist ein Bereich, der von vier Grid-Linien eingegrenzt ist und aus einem, zwei, vier oder mehr benachbarten Zellen besteht (Grid-Zellen sind also auch gleichzeitig Grid-Areas). Areas können Namen für einen besseren Wiedererkennungswert haben.

Einfache Beispiel: Layout mit display: grid

Kein Support für CSS display: grid mit diesem Browser

elem1elem2elem3elem4elem5elem6
elem1

Als es klingelte, nachts, es war kurz vor halb zehn, wurde niemand erwartet und niemand gesehen

elem2

Doch dann sah sie auf einer Urne zuletzt eine fremde Erscheinung und waren entsetzt.

elem3

Plötzlich sprang sie hinunter und rannte ins Haus und seitdem brachte niemand den Gast mehr hinaus.

elem4

Sonntags wirkte er mürrisch und manchmal leicht irr, denn er aß nicht nur Toast sondern Tafelgeschirr.

elem5

Es beliebte bisweilen ihm im Kamin seine schneeweißen Segeltuchschuh auszuziehn.

elem6

Es kam vor dass für Tage er verschwand, bis man ihn in einer Suppenterrine wiederfand.

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

display: grid;

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

            +-- Abstand der Spalten und Zeilen
            |
grid-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.

grid-column-gap und grid-row-gap bestimmen den Abstand zwischen den Spalten bzw. den Zeilen. grid-gap ist die Kurzschrift für grid-column-gap und 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.

Browser-Support für Grid

Grid ist in den modernen Browser gelandet: In Chrome ab Version 57, IE10, IE11 und Edge bieten ebenfalls bereits Support für Grid, wenn auch in einer veralteten Syntax. Hoffen wird, dass Microsoft Erbarmen hat, denn IE11 bleibt noch für einige Jahre im Support.

Safari hat CSS Grid mit Version 10.1 in Gang gesetzt, Firefox mit Version 52.

1 2 3 4 1 2 3 4 C S S G R I D