fr – die neue CSS Einheit

fr – die neue CSS Einheit

Das Layouten mit CSS ist keine einfache Angelegenheit. Zum Glück sind die Flex Boxes und CSS Grid jetzt von allen wichtigen Browsern unterstützt. Das Bestimmen der Breiten der Container war trotzdem noch Handarbeit. Zum Glück gibt es jetzt die Einheit fr (Fraction). fr bedeutet einfach «Rest», was übrig bleibt. Das heisst, der Browser berechnet die Breite selbst in Abhängigkeit des Viewports, der Paddings und Margins.

Im folgenden 13-spaltigen Layout soll die Navigation 4 Einheiten, die Inhalte je 1 Einheit breit sein:

Wie berechnet sich das Layout mit dem Grid und den Fractions? Die Lösung ist verdächtig einfach:

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

Was bedeutet der Code? Mit grid-template-columns werden die Spaltenbreiten definiert. Zuerst kommt eine Spalte mit der relativen Breite von 4 Einheiten, dann folgen 12 Spalten mit der Breite von je einer Einheit. Der Abstand grid-column-gap zwischen den Spalten wird vom Browser bei der Berechnung ebenso berücksichtigt wie ein Padding.

Einfach, nicht?

Den Code des fertigen Beispiels finden Sie hier im Netz.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.