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.

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;
}

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";
}

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

.item {
  grid-area: header;
}

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;
}

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

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

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;    
}

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;    
}

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.

PreviousFlexbox NextResponsive Design

Last updated 7 months ago