CSS Grid Funktionen

CSS Grid bietet Funktionen, mit denen wir Spalten und Reihen einfacher, flexibler und lesbarer definieren können. Die wichtigsten Funktionen für den Einstieg sind repeat(), minmax() und fit-content().

Repeat Funktion

repeat() wiederholt ein Spalten- oder Reihenmuster.grid-template-columns: repeat(3, 1fr);Das bedeutet: Wiederhole 1fr dreimal. Ausgeschrieben wäre das: grid-template-columns: 1fr 1fr 1fr;

MinMax Funktion

Mit minmax() legen wir eine Mindestgröße und eine Maximalgröße für eine Spalte oder Reihe fest.grid-template-columns: repeat(3, minmax(180px, 1fr)); Das bedeute

fit-content Funktion

fit-content() lässt eine Spalte so breit werden wie ihr Inhalt, aber nur bis zu einer bestimmten Maximalbreite. grid-template-columns: fit-content(240px) 1fr; Das bedeutet: Die erste Spalte orientiert sich am Inhalt, wird aber maximal 240px breit. Die zweite Spalte bekommt den restlichen Platz.

Vergleich der Funktionen