Die Einheit fr

Spalten mit fester Breite in Pixeln passen sich der Seite nicht an. In einem breiten Fenster bleibt neben dem Grid leerer Platz, und in einem schmalen passt das Grid vielleicht nicht hinein.

Deshalb hat das Grid eine eigene Einheit, fr (von fraction, Anteil). 1fr ist ein Anteil des freien Platzes im Grid-Container. Der Browser zieht zuerst die Breite der Spalten mit fester Größe ab und teilt den Rest entsprechend ihren Zahlen auf die fr-Spalten auf.

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

Drei Spalten mit je einem Anteil, jede bekommt also ein Drittel der Breite. Wird der Container breiter oder schmaler, ändern sich die Spalten mit ihm.

Die Anteile müssen nicht gleich sein. Bei 2fr 1fr 1fr bekommt die erste Spalte zwei Anteile und die anderen beiden je einen, die erste ist also doppelt so breit:

Die Einheit fr lässt sich auch mit anderen Einheiten kombinieren. 200px 1fr erzeugt eine Spalte von 200 Pixeln Breite und eine zweite, die den ganzen restlichen Platz einnimmt. Das ist praktisch für ein Menü neben dem Inhalt.

Wenn alle Spalten gleich sind, können wir sie mit der Funktion repeat() kürzer schreiben. Wie rgb() hat eine Funktion einen Namen und Werte in Klammern. Der erste Wert von repeat() ist die Anzahl der Spalten und der zweite ihre Breite, repeat(3, 1fr) bedeutet also dasselbe wie 1fr 1fr 1fr.