Automatisches Layout¶

grid-auto-flow¶

Mit grid-auto-flow bestimmt man, wie Elemente automatisch im Grid platziert werden.

Wert	Erklärung
`row`	Standard. Elemente werden zeilenweise eingefüllt
`column`	Elemente werden spaltenweise eingefüllt
`dense`	Versucht Lücken zu füllen

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto auto;
  grid-auto-flow: column;
}

Die Elemente werden jetzt von oben nach unten statt von links nach rechts eingefüllt.

Mit dense versucht das Grid, Lücken zu füllen. Kleinere Elemente können vor größeren platziert werden, um keine leeren Zellen zu hinterlassen.

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

.box3 {
  grid-column: span 2;
}

Mit grid-auto-rows legt man die Höhe von automatisch erstellten Zeilen fest.

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

Wenn mehr Elemente vorhanden sind als in grid-template-rows definiert, werden automatisch neue Zeilen mit 150px Höhe erstellt.

Man kann auch flexible Höhen definieren:

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

Die Zeilen sind mindestens 100px hoch, können aber größer werden, wenn der Inhalt mehr Platz benötigt.

Mit grid-auto-columns bestimmt man die Breite von automatisch erstellten Spalten.

.container {
  display: grid;
  grid-template-rows: repeat(2, 100px);
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

Wenn Elemente nicht in die definierten Spalten passen, werden automatisch neue Spalten mit 200px Breite erstellt.