css mit Adi Prinz

CSS Grid Layout

Das CSS Grid-Layout bietet ein gitterbasiertes Layoutsystem mit Zeilen und Spalten, mit dem Webseiten einfacher gestaltet werden können, ohne dass Floats und Positionierungen verwendet werden müssen.

Ein Grid-Layout besteht aus einem übergeordneten Element (Container) mit einem oder mehreren untergeordneten Elementen (Items). Alle direkten untergeordneten Elemente des Containers werden automatisch zu Grid-Items.

Die vertikalen Linien von Grid-Items werden als columns (Spalten) bezeichnet. Die horizontalen Linien von Grid-Items werden als rows (Zeilen) bezeichnet. Der Abstand zwischen den einzelnen columns/rows wird als gap bezeichnet.

Funktionsweise von CSS Grid

CSS Grids arbeiten mit einem Elternelement (grid-container), in dem das Raster definiert wird und mit darin enthaltenen Kind-Elementen (grid-items), die im Raster positioniert werden. Dem Elternelement wird mit Hilfe der Angabe 

display:grid; oder
display:inline-grid;

mitgeteilt, dass CSS Grids genutzt werden sollen. Anschließend können Sie mithilfe der Eigenschaften grid-template-columns und grid-template-rows ein grid erstellen. Mit grid-gap erstellen sie noch Spalten- und Zeilenabstände. 

grid-template-columns: 120px 1fr 80px;
grid-template-rows: 50px 120px 80px;
grid-gap: 10px;

Basis HTML und CSS der Beispiele

Alle Beispiele dieser Seite bestehen aus einen Grid-Container und einer unterschiedlichen Anzahl von Grid-Items. Die Grid-Eigenschaften werden mit einer Klasse .wrapper? verändert.

Basis-CSS

#wrapper {
  display: grid;
  max-width:800px;
  background-color: #fcfcfc;
  padding: 10px;
  margin: 20px 0;
  border: 1px solid #ccc;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.wrapper? {
  /*grid Eigenschaften*/
}
#wrapper .item {
  background-color: #444;
  color: #fff;
  border-radius: 5px;
  padding: 7px 20px;
  font-size: 1.2em;
}
#wrapper .item:nth-child(even) {
  background-color: #ccc;
  color: #000;
}

Basis-HTML

<div id="wrapper" class="wrapper?"> 
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

Explicite und Implicite-Grids

Explicite Grids werden mit den Eigenschaften grid-template-rows, grid-template-columns und grid-template-areas vorab definiert. Spaltenbreite (Column) und Zeilenhöhe (Rows) können definiert werden. Die fr-Einheit kann für grid-rows- und grid-columns-werte verwendet werden. Es steht für "Anteil der verfügbaren Breite".

Implizite Grids werden mit den Eigenschaften grid-auto-rows und grid-auto-columns vorab definiert. Spaltenbreite (Column) und Zeilenhöhe (Rows) müssen nur einmal definiert werden.

Ein einfaches Beispiel mit explizitem Grid

das folgende Beispiel besteht aus 9 Grid-Items. Die Positionierung wird mit grid-template-columns und grid-template-rows in 3 Spalten (Columns) und 3 Zeilen (Rows) aufgeteilt.

Beispiel-CSS

.wrapper1 {
  grid-gap: 10px;
  grid-template-columns: 120px 1fr 80px;
  grid-template-rows: 50px 120px 80px;
}

Beispiel-HTML

<div id="wrapper" class="wrapper1"> 
  <div class="item">1</div>
  <-- Weitere 8 Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6
7
8
9

Ein einfaches Beispiel mit implizitem Grid

Das folgende Beispiel besteht aus 9 Grid-Items. Die Spaltenbreiten werden mit grid-template-columns explizit definiert und die Zeilenhöhen mit grid-auto-rows implizit nur einmal definiert. Alle Zeilen bekommen automatisch dieselbe Höhe.

Beispiel-CSS

.wrapper2 {
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: 50px;
}

Beispiel-HTML

<div id="wrapper" class="wrapper2"> 
  <div class="item">1</div>
  <-- Weitere 8 Items -->
</div>

Beispiel-Ausgabe

1
2
3
4
5
6
7
8
9

Eigenschaften im Grid-Container

Ein Grid-Layout besteht aus einem Grid-Container und mindestens einem Grid-Item. In der folgenden Tabelle finden sie Eigenschaften, die im Grid-Container vorkommen können.

Container Eigenschaften-Tabelle

Eigenschaft Beschreibung Beispiel Standard
display:grid Definiert einen grid-container display:grid;
display:inline-grid Definiert einen inline grid-container display: inline-grid;
grid-template-columns Legt Anzahl und Größen der Spalten fest grid-template-columns:100px 1fr 100px; none
grid-template-rows Legt Anzahl und Größen der Zeilen fest grid-template-rows: 50px 120px 80px; none
grid-template-areas Legt Aufbau und Position von vorher mit grid-area bestimmten Grid-Elementen fest grid-template-areas:". header header" "sidebar content content" "footer footer footer"; none
grid-template Zusammenfassung der Eigenschaften grid-template-areas, grid-template-rows und grid-template-columns grid-template:"b b c" 1em / 20% 20px 1fr; none
grid-auto-columns Spaltenbreite für implicit lines grid-auto-columns: 100px; auto
grid-auto-rows Zeilenhöhe für implicit lines grid-auto-rows: 100px; auto
grid-auto-flow legt fest, wie sich auto-placememt Inhalte des Grids verteilen grid-auto-flow: column; row
grid-column-gap Abstand zwischen den Spalten grid-column-gap:20px; 0
grid-row-gap Abstand zwischen den Zeilen grid-row-gap:20px; 0
column-gap, row-gap Kurzschreibweisen column-gap:20px; 0
grid-gap Zusammenfassung der Eigenschaften row-gap und column-gap grid-gap:2em 1em; 0
gap Kurzschreibweise der Eigenschaft grid-gap gap:2em 1em; 0
grid Setzt alle explizite und implizite grid-Eigenschaften grid: 80px 120px / auto auto auto; none
justify-content Definiert wie der Platz zwischen Items entlang der inline-Achse verteilt wird. justify-content: space-between; justify-content: start;
align-content Definiert wie der Browser den Abstand zwischen Items entlang der Block-Achse eines Grid-Containers verteilt align-content: center; align-content: stretch;
justify-items Definiert wie Items innerhalb der Grid-Areas an der Inline-Achse ausgerichtet justify-items: end; justify-items: normal;
align-items Definiert wie Items innerhalb der Grid-Areas an der Block-Achse ausgerichtet werden align-items: baseline; align-items: stretch;

Grid-Template: Kurzschreibweise

Die grid-template-Eigenschaft ist eine Kurzschrift, die alle expliziten Grid-Eigenschaften in einer einfachen Deklaration zusammenfast.

  • grid-template-rows, grid-template-columns, grid-template-areas -> Eplizite Eigenschaften

Die Syntax von grid-template: 

grid-template: none;
grid-template-rows / grid-template-columns;
---Beispiel---
grid-template: 80px 100px / 20% 1fr 20%;
grid-template-areas;
---Beispiel---
grid-template: "header header header" 
      "main main aside" 
      "footer footer footer";
initial;
inherit;

Grid: Kurzschreibweise

Die grid-Eigenschaft ist eine Kurzschrift, die alle expliziten und impliziten Grid-Eigenschaften in einer einfachen Deklaration zusammenfast.

  • grid-template-rows, grid-template-columns, grid-template-areas -> Eplizite Eigenschaften
  • grid-auto-rows, grid-auto-columns, grid-auto-flow -> Implizite Eigenschaften

Die Syntax von grid: 

grid: none;
grid-template-rows / grid-template-columns;
---Beispiel---
grid: 80px 100px / 20% 1fr 20%;
grid-template-areas;
---Beispiel---
grid: "header header header" 
      "main main aside" 
      "footer footer footer";
grid-template-rows / [grid-auto-flow] grid-auto-columns;
---Beispiel---
grid: 80px 100px / auto-flow 100px;
[grid-auto-flow] grid-auto-rows / grid-template-columns;
---Beispiel---
grid: auto-flow 100px / auto auto auto;
initial;
inherit;

Weitere Grid-Beispiele 

/* Werte für <'grid-template'> */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* Werte für <'grid-template-rows'> /
   [ auto-flow && dense? ] <'grid-auto-columns'>? */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* Werte für [ auto-flow && dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* Globale Werte */
grid: inherit;
grid: initial;
grid: unset;

Maßeinheiten der Eigenschaft grid-template

Maßeinheit Beschreibung
auto Die Größe der Spalten wird durch die Größe des Containers und die Größe des Inhalts bestimmt
px, em, rem, vw, ch absolute Einheiten
% Prozent
fr (Fraction) Anteil der verfügbaren Breite
max-content Größter Inhaltsbeitrag der Rasterelemente
min-content Kleinster Inhaltsbeitrag der Rasterelemente
fit-content(300px) Inhalt an definierte Breite anpassen.
minmax(60px,200px) Mindestgröße und Höchstgröße. Will man nur eine der beiden Größen definieren, weist man der anderen den Wert auto zu. minmax(100px, auto);
repeat(3, 100px) Hier werden 3 Spalten von 100 Pixel Breite erzeugt
repeat(auto-fill, 200px) Mittels auto-fill werden soviele Spalten erzeugt wie in die Gesamtbreite des Grid-Containers passen.
repeat(auto-fit, 200px) Wie auto-fill aber alle Spalten sind gleichmäßig über den verfügbaren Grid-Container verteilt.
[start-line] 1fr [main-line] 2fr Man kann zustätzlich eigene line-names vergeben, welche dazu dienen Elemente über mehrere mehrere Tracks zu spannen oder zu versetzen.

Weitere Beispiel-Grids

Hier finden sie noch Beispiele zum Thema grid-template-Zusammenfassung und grid-Zusammenfassung (Shorthand).

Beispiel grid-template Shorthand

Wichtig dabei ist die Reihenfolge. Zuerst grid-template-rows dann grid-template-columns, getrennt mit einem Slash.

Beispiel CSS 

.wrapper3 {
  grid-template: 80px 120px / 20% 1fr 20%;
  grid-gap: 10px;
}

Beispiel HTML 

<div id="wrapper" class="wrapper3"> 
  <div class="item">1</div>
  <-- Weitere Items -->  <-- Weitere Items -->
</div>

Beispiel Ausgabe

1
2
3
4
5
6

Beispiel grid Shorthand

Auch hier gilt: Zuerst grid-template-rows dann grid-template-columns, getrennt mit einem Slash.

Beispiel CSS 

.wrapper4 {
  grid: 60px 80px 80px / repeat(3, 1fr);
  grid-gap: 10px;
}

Beispiel HTML 

<div id="wrapper" class="wrapper4"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel Ausgabe

1
2
3
4
5
6
7
8
9

Noch ein Beispiel mit grid Shorthand und Impliziten Grid-Rows

Beispiel CSS 

grid: auto-flow 80px / repeat(3, auto);
grid-gap: 10px;

Beispiel HTML 

<div id="wrapper" class="wrapper5"> 
  <div class="item">1</div>
  <-- Weitere Items -->
</div>

Beispiel Ausgabe

1
2
3
4
5
6
7
8
9

Eigenschaften im Grid-Item

Ein Grid-Layout besteht aus einem Grid-Container und mindestens einem Grid-Item. In der folgenden Tabelle finden sie Eigenschaften, die im Grid-Item vorkommen können.

Item Eigenschaften-Tabelle

Eigenschaft Beschreibung Beispiel
grid-area Zusammenfassung von grid-column und grid-row grid-area: 2 / 1 / span 2 / span 3;
grid-column Zusammenfassung von grid-column-start und grid-column-end grid-column: 1 / span 2;
grid-row Zusammenfassung von grid-row-start und grid-row-end grid-row: 1 / span 2;
grid-column-start Legt Plazierung ab Column-Line fest grid-column-start: 2;
grid-column-end Legt Plazierung bis Column-Line fest grid-column-end: 4;
grid-row-start Legt Plazierung ab Row-Line fest grid-row-start: 2;
grid-row-end Legt Plazierung bis Row-Line fest grid-row-start: 4;
justify-self Definiert wie Items innerhalb der Grid-Areas an der Inline-Achse individuell ausgerichtet werden justify-self: start;
align-self Definiert wie Items innerhlb der Grid-Areas an der Block-Achse individuell ausgerichtet werden align-self: end;
order Definiert die Reihenfolge, wie Grid-Items innerhalb ihres Grid-Containers dargestellt werden order: 2;

Grid Elemente

Wenn sie ein Grid für ein Element deklarieren und die Items nicht positionieren, bestimmt der Auto-Placememt-Algorithmus, was der Browser mit diesen nicht platzierten Items tun soll. Standardmäßig werden Items in der Reihenfolge plaziert wie sie im HTML geschrieben wurden.

Items im Raster positionieren

Mit CSS Grids ist es möglich, Elemente völlig frei im Raster zu positionieren. Bitte beachten sie, dass die Positionierung nicht über Spalten und Zeilen (Tracks), sondern über Linien (Grid-Lines) erfolgt.

Grid-Line

Grid-Lines sind Trennlinien, aus denen sich die Struktur des Grids zusammensetzt. Sie können entweder vertikal oder horizontal sein.

Grid-Cell

Grid-Cell ist der Abstand zwischen zwei benachbarten Zeilen- und zwei benachbarten Spalten-grid-lines. Es ist eine einzelne Einheit des Grids. Im Bild ist die Grid-Cell zwischen den row grid lines 2 und 3, und column grid lines 2 und 3.

Grid-Track

Der Abstand zwischen zwei benachbarten Grid-Lines. Im Bild ist der Grid-Track zwischen der Grid-Line der zweiten und dritten Reihe.

Grid-Area

Der gesamte Raum, umgeben von vier Grid-Lines. Ein Grid-Area kann aus einer beliebigen Anzahl von Grid-Cells bestehen. Im Bild ist die Grid-Area zwischen den Zeilen-grid-lines 2 und 4 und den Spalten-grid-lines 1 und 3.