CSS/Tutorials/Grid/Grid-Items

Aus SELFHTML-Wiki
< CSS‎ | Tutorials‎ | Grid
Wechseln zu: Navigation, Suche

Das Grid Layout unterscheidet zwischen dem Elternelement Grid-Container und den darin enthaltenen Rasterelementen (Grid-Items). Wie im letzten Beispiel schon angerissen, können die Grid Items beliebig im Raster platziert und dimensioniert werden:


Die Rasterelemente[Bearbeiten]

Unsere Webseite soll ja eben nicht aus gleichgroßen Blöcken bestehen. Deshalb sollen im nächsten Schritt individuelle Festlegungen für jedes einzelne Rasterelement getroffen werden. Die Rasterelemente können einzelne Zellen oder aber einen Rasterbereich (grid area) über mehrere Felder einnehmen.

Anfangs- und Endlinien festlegen[Bearbeiten]

Mit den Eigenschaften grid-row-start, grid-column-start, sowie grid-row-end und grid-column-end können Sie Anfangs- und End-Spalte, bzw. Zeile und damit die Größe und Position innerhalb der grid row festlegen. Übersichtlicher ist die Verwendung der zusammenfassenden Eigenschaften (shorthand properties) grid-column und grid-row:

Beispiel: Grundraster mit festgelegtem Rasterbereich für den header ansehen …
body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

header {
  grid-column: 1 / 6;
  grid-row:    1 / auto;			
}

nav {
  grid-column: 1 / span 5;
  grid-row:    2;		
}
Ausgangspunkt ist wieder unser 5-spaltiger Raster.

Für den header legen wir mit grid-column fest, dass er in der ersten Spalte beginnen und dann am Ende der 5. Spalte ( also an der 6. Rasterlinie) enden soll. grid-row legt fest, dass er von der ersten horizontalen Rasterlinie beginnen soll. Der Wert auto wird als span mit einem Wert von 1 berechnet, sodass das Element eine Zeile hoch ist.

Die Navigation beginnt in der ersten Spalte und erstreckt sich durch das Schlüsselwort span über 5 Spalten. Die vertikale Positionierung beginnt in der 2. Zeile und ist eine Zeile hoch. Da der Defaultwert für grid-row-end ja auto beträgt, muss er nicht mehr explizit erwähnt werden.

Die anderen vier Rasterelemente werden als schmale Spalten in der dritten Zeile dargestellt.


Empfehlung: Öffnen Sie das Beispiel einmal im Frickl und einmal in einem neuen Tab. Bei einem schmalerem Viewport vertielen sich die 4 verbliebenen Rasterelemente auf den verfügbaren Raum, bei breiteren Viewports bleibt rechts eine Spalte frei.

In einem weiteren Schritt werden nun für alle Kindelemente des Rasters eigene Rasterbereiche festgelegt:

Beispiel: Grundraster mit festgelegten Rasterbereichen ansehen …
body{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

header {
  grid-column: 1 / 5;
  grid-row:    1 / 2;			
}

nav {
  grid-column: 1 / 2;
  grid-row:    2 / 4;					
}

article {
  grid-column: 2 / 4;
  grid-row:    2 / 4;					
}

aside {
  grid-column: 5 / 6;
}

footer {
  grid-column: 1 / 6;
  grid-row:    4 / 5;					
}
Für jedes Kindelement im Raster wird mit grid-column und grid-row ein Rasterbereich (grid area) festgelegt.

Fünf Dinge fallen auf:

  • Der article endet an der 4. Linie, die aside-Boxen beginnen aber erst bei der 5. Linie. Der dazwischenliegende Platz bleibt (im Unterschied zu einer Umsetzung mit Flexbox) leer.
  • Die aside-Boxen erhalten keine Festlegung der Höhe und nehmen dann den Defaultwert von einer Spanne / der Höhe einer Zelle ein. Die zweite aside-Box wird automatisch in einer neuen Zelle unterhalb der ersten platziert.
  • Die Positionierung erfolgt unabhängig von der Reihenfolge im HTML-Markup. (Allerdings sollte dies aus Zugänglichkeitsgründen nur in Ausnahmefällen erfolgen.)
  • Während die Spalten mit grid-template-columns: repeat(5, 1fr); festgelegt wurden, werden die Zeilen auch ohne Festlegung automatisch gebildet.
    Empfehlung: Entfernen Sie die Wertzuweisung für grid-template-columns und beobachten Sie, was passiert.
  • Alle Rasterelemente haben einen margin von .5em, sonst würden die Elemente aneinanderstoßen. (Dies kann aber auch mit gap erreicht werden.)

Ein Blick in den Seiteninspektor des Firefox verrät, dass diese expliziten Festlegungen vom Browser in der zusammenfassenden Eigenschaft grid-area notiert werden. Dabei werden die Werte von grid-row-start, grid-column-start, grid-row-end und grid-column-end jeweils mit einem Slash (/) notiert:

Beispiel: Rasterbereiche mit grid-area
header {
  grid-area:  1 / 1 / 2 / 6;			
}

*/ übersichtlichere Alternative */

nav {
  grid-area: 2 / 1 / auto / span 1;				
}
Kürzer, aber auch unübersichtlicher. Wenn das Layout steht, könnte man die Eigenschaften so zusammenfassen. Durch die Angabe der Schlüsselworts span für die Breite oder Höhe könnte man wieder Übersichtlichkeit gewinnen.

Achtung!

Die Browser IE10, IE 11 und Edge 12-15 haben eine ältere Version der Spezifikation implemetiert, die diese und andere zusammenfassenden Eigenschaften nicht kennen. Auch die folgenden Beispiele funktionieren dort nicht.

negative Werte[Bearbeiten]

Wenn Sie Elemente über die gesamte Breite (oder bis zum Ende) des Rasters spannen wollen, müssen Sie nicht die Anzahl der Zellen zählen, bzw. den Wert bei einer Änderung der Anzahl der Spalten ändern. Ein negativer Wert beginnt mit der Zählung von rechts, sodass das Element dann alle Spalten überspannt:

Beispiel: Elemente über die gesamte Breite
body{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

header {
  grid-column: 1 / -1;
  grid-row:    1 / 2;			
}
Der header beginnt an der ersten Rasterline. Das Ende befindet sich durch den Wert -1 am Beginn von rechts, also dem Ende des Rasters.