Eine Einführung in die `fr`-CSS-Einheit

Bei all der Begeisterung für CSS Grid habe ich nicht so viel über die neue `fr`-CSS-Längeneinheit gelesen (hier ist die Spezifikation). Und da die Browserunterstützung für dieses Feature rasant zunimmt, denke ich, dass jetzt der richtige Zeitpunkt ist, zu untersuchen, wie es in Verbindung mit unserer schicken neuen Layout-Engine eingesetzt werden kann, denn die Verwendung bietet eine Reihe von Vorteilen; eine lesbarere und wartbarere Codebasis ist der Hauptgrund für den Umstieg.

Um zu beginnen, werfen wir einen Blick darauf, wie wir normalerweise ein Grid in CSS aufbauen würden. Im folgenden Beispiel erstellen wir ein Raster mit vier Spalten, bei denen jede Spalte die gleiche Breite hat.

<div class="grid">
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
<div class="column"> </div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-column-gap: 10px;
}

Wenn Sie die Funktion `repeat()` nach der Eigenschaft `grid-template-columns` noch nie gesehen haben, dann lassen Sie mich Ihnen eine der elegantesten Funktionen von CSS Grid vorstellen! Sie ist im Wesentlichen eine Kurzschreibweise, die es uns ermöglicht, wiederholte Werte prägnanter zu beschreiben. Wir hätten stattdessen `grid-template-columns: 25% 25% 25% 25%;` schreiben können, aber die Verwendung von `repeat()` ist übersichtlicher, insbesondere wenn man ausführlichere Breiten hat (wie z. B. einen `minmax()`-Ausdruck).

Die Syntax ist im Wesentlichen diese

repeat(number of columns/rows, the column width we want);

Es gibt eigentlich ein paar Probleme mit dem, was wir bisher getan haben.

Erstens mussten wir, um diese nette CSS-Funktion nutzen zu können, ein wenig rechnen. Wir mussten uns überlegen, *was ist die Gesamtbreite des Grids (100%), geteilt durch die gewünschte Anzahl von Spalten (4)*, was 25% ergibt. In diesem Fall ist die Rechnung ziemlich einfach, sodass wir uns keine Sorgen machen müssen, aber in komplexeren Beispielen können wir die Rechnung komplett vermeiden und den Browser das für uns ausrechnen lassen. Wir haben zwar `calc()` zur Verfügung, sodass wir `repeat(4, calc(100% / 4)` hätten machen können, aber selbst das ist ein wenig seltsam, und es gibt sowieso noch ein weiteres Problem...

Das zweite Problem ist ein Überlaufproblem. Da wir jede Spalte auf 25 % und den `grid-column-gap` auf 10 Pixel gesetzt haben, wird das Grid-Element dadurch *breiter als 100 %*. Es ist nicht so, wie man es nur anhand des obigen Codes erwarten würde, aber so funktionieren Prozentsätze. Mit dem obigen Code sagen wir im Grunde: "Setze jede Spalte auf 25 % der Breite des Viewports *und* habe einen Abstand von 10 Pixeln dazwischen." Es ist ein subtiler Unterschied, der aber zu einem großen Layoutproblem führt.

Wir haben hier unbeabsichtigt ein horizontales Scrollen verursacht.

Hier kann die `fr`-Einheit helfen.

Die `fr`-Einheit (eine "Fraktion") kann bei der Definition von Grids wie jede andere CSS-Längeneinheit wie `%`, `px` oder `em` verwendet werden. Lassen Sie uns den obigen Code schnell überarbeiten, um diesen eigentümlichen neuen Wert zu verwenden.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 10px;
}

Das sieht genauso aus wie im obigen Beispiel, denn in diesem Fall setzen wir jede unserer vier Spalten auf eine Fraktion (was 1/4 oder 25 % entspricht). Aber! Es gibt keinen Überlauf mehr auf der x-Achse, da jede Spalte auf 1fr gesetzt wird, was die 10 Pixel automatisch berücksichtigt und von der Gesamtbreite abzieht, die für jede Spalte zur Verfügung steht.

Warum sollte ich lernen, diese schicke neue CSS-Länge zu verwenden, wenn ich mich größtenteils an Einheiten wie Prozent oder Pixel halten kann, fragen Sie sich? Nun, lassen Sie uns ein komplexeres CSS Grid-Beispiel untersuchen, um zu erklären, warum `fr` eine bessere Alternative ist. In einem neuen Beispiel nehmen wir an, wir möchten unsere Navigation links haben, gefolgt von einem zwölfspaltigen Grid, das so aussehen soll:

Dies ist ein ziemlich typisches Szenario für viele UIs, und die Verwendung der `fr`-Einheit verhindert, dass wir entweder einen separaten Grid-Div erstellen oder mit `calc()` herumfummeln. Denn wenn wir `fr` im obigen Beispiel nicht verwenden würden, müssten wir Folgendes herausfinden:

the width of each column = ((width of viewport - width of nav) / number of columns) * 1%

Das ist sicher möglich, es ist nur furchtbar schmerzhaft zu lesen, und wenn wir die Breite der Nav ändern würden, müssten wir diese dumme Berechnung immer wieder von neuem durchführen. Stattdessen räumt die `fr`-Einheit all das in einer super lesbaren Codezeile auf:

.grid {
  display: grid;
  grid-template-columns: 250px repeat(12, 1fr);
  grid-column-gap: 10px;
}

Wir legen hier eine feste Breite in Pixeln für die erste Spalte fest und erstellen dann zwölf separate Spalten, die auf "einem Bruchteil des freien Platzes" (buchstäblich so, wie die Spezifikation es formuliert) gesetzt sind. Aber es gibt keine verrückten Berechnungen oder so etwas! Es ist super lesbar, und wenn sich die Breite dieser linken Navigation ändert, passen sich die Spalten auf der rechten Seite automatisch an.

Mit ein wenig Aufwand haben wir unser Interface zukunftssicherer und wartbarer gemacht und sichergestellt, dass unser Code für die nächsten Entwickler, die nach uns kommen, besser lesbar ist.

Informationen von anderen Leuten

Ein Teil des Spaßes und der Leistungsfähigkeit der `fr`-Einheit ergibt sich aus der Kombination mit anderen Einheiten. Stellen Sie sich eine feste Seitenleiste und einen Hauptinhaltsbereich vor, der den Rest des Platzes einnimmt: `grid-template-columns: 200px 1fr;` einfach!

Hier ist ein Beispiel von DigitalOcean, das gemischte Einheiten schön zeigt.

---

Rachel Andrew hat ein Video speziell über `fr`.

---

Anna Monus hat einen sehr guten Artikel über `fr`.

---

Juhu für die `fr`-Einheit!