CSS Grid Funktionen

CSS Grid bietet Funktionen, mit denen du Spalten und Reihen einfacher, flexibler und lesbarer definieren kannst. 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() legst du eine Mindestgröße und eine Maximalgröße für eine Spalte oder Reihe fest.grid-template-columns: repeat(3, minmax(180px, 1fr));Das bedeutet: Jede Spalte ist mindestens 180px breit und wächst bei Bedarf gleichmäßig mit.

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