fr-Einheit in CSS Grid erklärt

Von Mateusz Viola

Aktualisiert: Juni 2026

Wer mit CSS Grid anfängt, stolpert früher oder später über ein kleines Kürzel mit großer Wirkung: fr. In fast jedem Grid-Layout taucht es auf, etwa in grid-template-columns: 1fr 1fr 1fr. Doch was genau verteilt diese Einheit, und warum funktioniert sie oft besser als Prozent oder px? In diesem Ratgeber klären wir die fr-Einheit von Grund auf, vergleichen sie mit den anderen gängigen Maßeinheiten und zeigen an konkreten Beispielen, wann du welche nimmst. Alle Beispiele kannst du direkt im CSS Grid Generator ausprobieren.

Was bedeutet fr eigentlich?

Das Kürzel fr steht für fraction, also Bruchteil. Es ist eine Einheit, die es ausschließlich in CSS Grid gibt und die einen Anteil am verfügbaren Platz innerhalb des Grid-Containers beschreibt. Anders als px oder rem ist fr keine absolute Größe, sondern ein Verteilungsschlüssel. Ein Wert von 1fr bedeutet: nimm einen Anteil vom freien Raum.

Die formale Definition stammt aus der CSS Grid Layout Spezifikation des W3C. Dort heißt es sinngemäß, dass die fr-Einheit einen Anteil am freien Raum des Grid-Containers darstellt. Genau diese Formulierung, freier Raum und nicht Gesamtbreite, ist der Schlüssel zum Verständnis. Wenn du drei Spalten mit 1fr 1fr 1fr definierst, teilt der Browser den frei verfügbaren Platz in drei gleiche Teile auf. Schreibst du stattdessen 2fr 1fr 1fr, bekommt die erste Spalte doppelt so viel wie jede der beiden anderen, also die Hälfte des Raums.

Wie der Browser fr berechnet

Die Reihenfolge der Berechnung ist entscheidend und erklärt, warum fr so robust ist. Der Browser geht in drei Schritten vor:

1. Feste Größen abziehen: Alle Spuren mit absoluten Einheiten (px, rem, em) und Inhaltsgrößen (auto, min-content) werden zuerst aufgelöst.
2. Abstände abziehen: Sämtliche gap-Werte zwischen den Spuren werden vom verfügbaren Platz entfernt.
3. Rest verteilen: Der übrig gebliebene freie Raum wird durch die Summe aller fr-Werte geteilt. Das Ergebnis ist die Länge eines fr, die dann mit dem jeweiligen Anteil multipliziert wird.

Ein Rechenbeispiel: Bei grid-template-columns: 200px 1fr 2fr in einem 560px breiten Container mit gap: 16px rechnet der Browser: 560 minus 200 (feste Spalte) minus 32 (zwei gaps) ergibt 328px freien Raum. Diese 328px teilt er durch drei fr-Anteile insgesamt, also rund 109px pro fr. Die 1fr-Spalte wird etwa 109px breit, die 2fr-Spalte etwa 219px. Genau das zeigt das Diagramm oben.

fr vs px vs Prozent vs auto

Die wichtigste Entscheidung beim Aufbau eines Grids ist die Wahl der Einheit pro Spalte. Jede hat ein klares Einsatzgebiet. Die folgende Tabelle fasst zusammen, wann welche Einheit sinnvoll ist und worauf du achten musst.

Der wichtigste Unterschied steckt zwischen fr und Prozent. Beide sehen auf den ersten Blick ähnlich aus, doch sie rechnen unterschiedlich. grid-template-columns: 33.33% 33.33% 33.33% bezieht sich auf die volle Containerbreite. Sobald du dann gap: 16px hinzufügst, summieren sich die drei Spalten plus zwei Lücken auf mehr als 100 Prozent, und das Grid läuft horizontal über. Mit 1fr 1fr 1fr passiert das nicht, weil fr den gap bereits vorher abzieht. Deshalb ist fr in Grid fast immer die bessere Wahl als Prozent.

fr mit minmax kombinieren

fr entfaltet seine volle Stärke erst zusammen mit der Funktion minmax(). Sie definiert eine untere und eine obere Grenze für eine Spur. Das löst gleich zwei Probleme: Spalten werden auf kleinen Bildschirmen nicht beliebig schmal, und gleichzeitig dürfen sie wachsen, wenn Platz da ist.

Das wohl bekannteste Muster für responsive Grids ohne Media Queries sieht so aus:

.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

Hier passiert Folgendes: minmax(200px, 1fr) sorgt dafür, dass jede Spalte mindestens 200px breit ist, aber den restlichen Platz (1fr) gleichmäßig ausfüllt. repeat(auto-fit, ...) erzeugt automatisch so viele Spalten, wie nebeneinander passen. Wird der Container schmaler, fallen Karten in die nächste Zeile, ganz ohne Media Query. Dieses Muster ist die Grundlage moderner Karten-Galerien und im Responsive-Tutorial ausführlich erklärt.

Typische Fallstricke mit fr

Drei Stolpersteine begegnen Einsteigern besonders häufig. Wer sie kennt, spart sich viel Debugging-Zeit:

• Der min-width-auto-Effekt: Eine fr-Spur schrumpft standardmäßig nicht unter die Größe ihres Inhalts. Ein langes Wort, eine URL oder ein Bild ohne max-width können die Spalte aufblähen. Lösung: minmax(0, 1fr) oder min-width: 0 auf dem Grid-Item.
• fr ohne freien Raum: Wenn feste Spalten und gaps bereits die gesamte Breite belegen, bleibt für fr nichts übrig. Die fr-Spur wird dann 0px breit. Prüfe in so einem Fall, ob die festen Größen wirklich nötig sind.
• fr in grid-template-rows ohne Höhe: Eine Zeile mit 1fr braucht eine definierte Containerhöhe, sonst gibt es keinen freien vertikalen Raum zu verteilen. Ohne Höhe verhält sich 1fr in Zeilen oft wie auto.

Praxis-Beispiele für den Alltag

Drei Layouts, die du immer wieder brauchst, und die passende fr-Schreibweise dazu. Kopiere sie als Startpunkt oder baue sie visuell im Generator nach.

1. Sidebar plus Hauptinhalt

grid-template-columns: 260px 1fr;
/* Feste Sidebar links, flexibler Inhalt rechts */

2. Drei gleich breite Spalten

grid-template-columns: repeat(3, 1fr);
/* Kurzform für 1fr 1fr 1fr */

3. Asymmetrisches Inhalt-zu-Rand-Verhältnis

grid-template-columns: 1fr 3fr 1fr;
/* Schmale Ränder, breiter Mittelteil (Lese-Layout) */

Wenn du sehen möchtest, wie sich diese Werte live auswirken, öffne den CSS Grid Generator, stelle die Spaltenanzahl ein und wechsle die Einheit pro Spalte zwischen fr, px und auto. Der Live-Code passt sich sofort an, und du siehst genau, wie sich der freie Raum verschiebt.

Häufige Fragen zur fr-Einheit

Quellen

• W3C: CSS Grid Layout Module Level 1, Abschnitt zur fr-Einheit (Flexible Lengths)
• MDN Web Docs: flex value (fr-Einheit)
• MDN Web Docs: minmax()
• MDN Web Docs: grid-template-columns

Verwandte Artikel