Grid Container

Grundstruktur

Zuerst wird ein div mit der Klasse container erstellt. Dies ist der Grid-Container. Darin befinden sich sechs weitere divs mit der Klasse box und jeweils eigenen Klassen box1 bis box6.

<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
</div>

Die Boxen erhalten folgendes Basis-CSS:

.box {
  padding: 20px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

.box1 {
  background-color: aqua;
}
.box2 {
  background-color: crimson;
  color: white;
}
.box3 {
  background-color: gold;
}
.box4 {
  background-color: lightgreen;
}
.box5 {
  background-color: plum;
}
.box6 {
  background-color: coral;
}

Ohne Grid werden die Boxen untereinander dargestellt, da divs Blockelemente sind.

1
2
3
4
5
6

display: grid

Die Eigenschaft display: grid verwandelt einen Container in einen Grid-Container. Alle direkten Kinder werden automatisch zu Grid-Items.

.container {
  display: grid;
}

Bemerkung

Auch wenn jetzt Grid aktiviert ist, sieht man noch keine Veränderung. Die Boxen sind weiterhin untereinander. Erst durch weitere Eigenschaften entsteht das eigentliche Grid-Layout.

grid-template-columns

Mit grid-template-columns definiert man die Anzahl und Breite der Spalten im Grid.

Feste Breiten

.container {
  display: grid;
  grid-template-columns: 100px 200px 100px;
}

Dies erstellt drei Spalten mit den Breiten 100px, 200px und 100px. Die Boxen werden automatisch von links nach rechts und von oben nach unten eingefüllt.

1
2
3
4
5
6

Flexible Breiten mit fr

Die Einheit fr (fraction) teilt den verfügbaren Platz proportional auf.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}

Die mittlere Spalte erhält doppelt so viel Platz wie die äußeren Spalten.

1
2
3
4
5
6

Wiederholungen mit repeat()

Statt mehrere gleiche Werte zu schreiben, kann man repeat() verwenden:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

Dies erstellt drei gleich breite Spalten.

1
2
3
4
5
6

Flexible Größen mit minmax()

Die Funktion minmax() legt eine Mindest- und Maximalgröße für Spalten oder Zeilen fest. Sie nimmt zwei Werte: den Minimalwert und den Maximalwert.

.container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(300px, 2fr);
}

Die erste Spalte ist mindestens 200px breit und kann bis zu 1fr wachsen. Die zweite Spalte ist mindestens 300px breit und kann bis zu 2fr wachsen.

1
2
3
4
5
6

Typische Anwendungen

Spalte mit Mindestbreite:

.container {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr);
}

Jede Spalte ist mindestens 150px breit, kann aber wachsen, um den verfügbaren Platz zu füllen.

1
2
3
4
5
6

Spalte mit Maximalbreite:

.container {
  display: grid;
  grid-template-columns: minmax(100px, 400px) 1fr;
}

Die erste Spalte kann zwischen 100px und 400px breit sein, die zweite nimmt den restlichen Platz ein.

1
2
3
4
5
6

Auto als Wert:

.container {
  display: grid;
  grid-template-columns: minmax(auto, 300px) 1fr;
}

Mit auto als Minimalwert passt sich die Spalte dem Inhalt an, wird aber nie größer als 300px.

1
2
3
4
5
6

Wichtig

minmax() ist besonders nützlich für responsive Designs, da Elemente nie zu klein oder zu groß werden.

Bemerkung

Man kann minmax() auch mit repeat() kombinieren, was besonders bei auto-fit und auto-fill häufig verwendet wird.

Auto-fit und auto-fill

Mit auto-fit und auto-fill kann man responsive Grids erstellen, die sich automatisch an die verfügbare Breite anpassen. Beide werden mit repeat() und minmax() kombiniert.

auto-fill

auto-fill erstellt so viele Spalten wie möglich, auch wenn sie leer bleiben.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  max-width: 500px;
}

Wenn der Container 500px breit ist, entstehen drei Spalten à 150px. Der übrige Platz bleibt leer oder wird gleichmäßig verteilt.

1
2
3
4
5
6

auto-fit

auto-fit erstellt ebenfalls so viele Spalten wie möglich, aber leere Spalten werden kollabiert und der Platz auf die vorhandenen Elemente verteilt.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

Wenn nur drei Boxen vorhanden sind, werden diese drei Spalten auf die gesamte Breite gestreckt.

1
2
3
4
5
6

Unterschied zwischen auto-fill und auto-fit

Der Unterschied wird nur sichtbar, wenn weniger Elemente vorhanden sind als in den Container passen würden.

auto-fit eignet sich für Layouts, bei denen Elemente den gesamten verfügbaren Platz nutzen sollen. auto-fill ist besser, wenn man die Spaltenbreite konstant halten möchte.

Gemischte Werte

Man kann verschiedene Einheiten kombinieren:

.container {
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
}

Die erste Spalte ist fest 100px breit, der restliche Platz wird im Verhältnis 1:2 aufgeteilt.

1
2
3
4
5
6

grid-template-rows

Mit grid-template-rows definiert man die Anzahl und Höhe der Zeilen.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px 150px;
}

Dies erstellt zwei Zeilen: die erste mit 100px Höhe, die zweite mit 150px Höhe. Wenn mehr Elemente vorhanden sind als Zeilen definiert wurden, werden automatisch weitere Zeilen erstellt.

1
2
3
4
5
6

Automatische Höhe

Lässt man grid-template-rows weg oder verwendet auto, passen sich die Zeilen dem Inhalt an:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
}
1
2
3
4
5
6

grid-template-areas

Mit grid-template-areas kann man ein Layout benennen und visuell gestalten. Dies ist besonders nützlich für übersichtliche, semantische Layouts.

Zuerst definiert man die Bereiche im Container:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px 200px 100px;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

Dann weist man den Grid-Items diese Bereiche zu:

.box1 {
  grid-area: header;
}
.box2 {
  grid-area: sidebar;
}
.box3 {
  grid-area: content;
}
.box4 {
  grid-area: footer;
}
1
2
3
4

Wichtig

Bereiche müssen rechteckig sein. Man kann keine L-förmigen Bereiche erstellen.

Leere Zellen

Mit einem Punkt . kann man Zellen leer lassen:

.container {
  grid-template-areas:
    "header header header"
    "sidebar content ."
    "footer footer footer";
}
1
2
3
4

gap

Mit gap bestimmt man den Abstand zwischen Grid-Zellen.

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
1
2
3
4

Verschiedene Abstände

Man kann auch unterschiedliche Abstände für Zeilen und Spalten definieren:

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 20px; /* 10px vertikal, 20px horizontal */
}
1
2
3
4

Grid-Lines

In einem Grid-Layout arbeitet man nicht nur mit Spalten und Reihen, sondern auch mit den Linien, die diese Bereiche voneinander trennen. Diese Linien nennt man Grid-Lines. Sie bilden gewissermaßen das unsichtbare Gerüst des gesamten Layouts. Jede Linie bekommt automatisch eine Nummer, sodass man Elemente sehr präzise platzieren kann. Man muss sich das wie ein Koordinatensystem vorstellen: Zwischen zwei Linien entsteht immer ein Bereich, und genau in diesen Bereich setzt man später seine Grid-Items.

Die Linien werden horizontal und vertikal durchnummeriert. Vertikale Linien bestimmen die Spalten, horizontale die Reihen. Ein Element kann man so zum Beispiel von Spalte 2 bis Spalte 4 oder von Reihe 1 bis 3 spannen lassen. Dadurch lassen sich auch komplexere Layouts ohne zusätzliche Hilfselemente aufbauen. Grid-Lines geben einem damit eine klare Kontrolle darüber, wo ein Element beginnt und wo es endet, unabhängig davon, wie groß die anderen Elemente sind.

CSS Grid Lines