Grid

Das CSS-Grid-Layout ist ein zweidimensionales Layoutsystem für das Web. Es ermöglicht dir, Inhalte in Reihen und Spalten zu organisieren und bietet viele Features, um die Erstellung komplexer Layouts zu vereinfachen.

---

Zunächst müssen wir einen Grid-Container erstellen. Dafür nutzen wir die display-Eigenschaft.

.container {
  display: grid;
}

Reihen und Spalten definieren

Mit grid-template-columns bzw. grid-template-rows können wir Spalten und Reihen definieren.

.container {
  grid-template-columns: ...  ...;
  /* e.g. 
      1fr 1fr
      minmax(10px, 1fr) 3fr
      repeat(5, 1fr)
      50px auto 100px 1fr
  */
  grid-template-rows: ... ...;
  /* e.g. 
      min-content 1fr min-content
      100px 1fr max-content
  */
}

Den Grid-Linien werden automatisch Zahlen zugewiesen.

Zahlenwerte im Grid-Layout

---

Nun können wir mit grid-column bzw. grid-row den Start und Ende eines Grid-Items bestimmen.

.item {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

grid-column und grid-row

Template-Areas

Mit Template-Areas können wir bestimmten Bereichen unseres Grids einen Namen geben.

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-template-areas: 
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}

template-areas

---

Mit grid-area können wir nun festlegen, welche Items zu welcher Area gehören.

.item {
  grid-area: header;
}

grid-area

grid-area kann auch als Shorthand für grid-row und grid-column genutzt werden.

.item-d {
  grid-area: 1 / span 2 / -1 / 6;
}

Abstände

Mit gap können wir die Abstände zwischen den Reihen und den Spalten bestimmen.

.container {
  gap: 1rem 2rem;
}

Wenn wir column-gap nicht spezifizieren, nutzt es den selben Wert wie row-gap.

Ausrichtung

Mit justify-items kannst du Grid-Items anhand der Inline-Achse ausrichten.

.container {
  justify-items: start | end | center | stretch;
}

justify-items

---

Mit align-items kannst du Grid-Items anhand der Block-Achse ausrichten.

.container {
  align-items: start | end | center | stretch;
}

align-items

---

place-items ist ein Shorthand für align-items und justify-items.

.center {
  display: grid;
  place-items: center / start;
}

---

Wenn die Grösse des Grids kleiner ist als der eigentliche Grid-Container können wir das Grid innerhalb des Containers ausrichten. Mit justify-content richten wir das Grid anhand der Inline-Achse aus.

.container {
  justify-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

justify-content

---

Mit justify-content richten wir das Grid anhand der Block-Achse aus.

.container {
  align-content: start | end | center | stretch | space-around | space-between | space-evenly;    
}

align-content

---

place-content ist ein Shorthand für align-content und justify-content.

.container {
  display: grid;
  place-content: center;
}

Die fr-Einheit

Die fr-Einheit repräsentiert eine Fraktion des ürbigen Platzes.

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

Hier sagen wir, dass die erste Spalte ca. $\frac{1}{4}$ des Platzes und die zweite Spalte ca. $\frac{3}{4}$ des Platzes einnimmt.

Die fr-Einheit kann aber natürlich auch in Kombination mit anderen Einheiten genutzt werden.

.container {
  grid-template-columns: 50px min-content 1fr;
}

Sizing-Keywords

min-content

Die Mindestgrösse des Inhalts. Stelle dir eine Textzeile wie „E pluribus unum“ vor. Der Mindestinhalt entspricht wahrscheinlich der Breite des Wortes „pluribus“.

max-content

Die maximale Grösse des Inhalts. Stelle dir den obigen Satz vor. Der maximale Inhalt ist die Länge des gesamten Satzes.

auto

Dieses Schlüsselwort ist ähnlich wie die fr-Einheiten, mit dem Unterschied, dass sie bei der Zuteilung des verbleibenden Platzes den Kampf gegen die fr-Einheiten „verlieren“.

Sizing Funktionen

fit-content()

Nutzt den verfügbaren Platz, jedoch nie weniger als min-content und nie mehr als max-content.

minmax()

Legt einen Mindest- und einen Höchstwert für die Länge fest. Dies ist nützlich in Kombination mit relativen Einheiten. Zum Beispiel kannst du eine Spalte nur bis zu einer gewissen Breite schrumpfen lassen.

grid-template-columns: minmax(100px, 1fr) 3fr;

Die repeat()-Funktion und Keywords

Die Funktion repeat() kann einige Tipparbeit ersparen:

grid-template-columns:
  1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

grid-template-columns:
  repeat(8, 1fr);

Aber repeat() kann besonders ausgefallen werden, wenn es mit Schlüsselwörtern kombiniert wird:

• auto-fill: Passt so viele Spalten wie möglich in eine Zeile ein, auch wenn sie leer sind.

• auto-fit: Passt alle vorhandenen Spalten in den Platz ein. Bevorzuge expandierende Spalten, um den Platz zu füllen, anstatt leere Spalten.

grid-template-columns: 
  repeat(auto-fit, minmax(250px, 1fr));

Mehr Informationen findest du in diesem Post.