Hallo Darelius,

ich und CSS sind wohl keine "Freunde"

Jede Freundschaft macht Arbeit, wenn man sie herbeiführen und erhalten möchte 😉

vh ist eine der unzähligen CSS Längeneinheiten. "Vertical High" ist fast richtig: vh steht für viewport height und man gibt damit an, wieviel Prozent der Viewporthöhe für dieses Maß zu verwenden sind. Der Viewport ist die Größe des Anzeigebereichs für die Seite. Schau in den verlinkten Wiki-Artikel.

10em 1fr ist eine Liste von Längenangaben. Wenn ich für ein Grid das Zeilen- oder Spaltenmuster definiere, muss ich für jeden Track (das der Oberbegriff für Zeilen und Spalten) angeben, welches Maß er haben soll (also die Höhe oder Breite). 10em ist eine CSS Längeneinheit, die auf der font-size Angaben basiert, die in dem betreffenden Element gilt. Der Browserdefault ist zumeist 16px. 8px ist schon sehr klein. Was tatsächlich verwendet wird, ist benutzerabhängig.

Der Browser zieht vom verfügbaren Platz diejenigen Trackmaße ab, die feste Größe haben. Der Rest wird auf die Tracks verteilt, die mit fr angegeben wurden. Dafür addiert er alle fr Werte auf und gibt jeder fr-Spalte den Anteil an der Summe, der für fr angegeben wurde. Eine Spaltenangabe von "10em 1fr 3fr" würde also für Spalte 1 10em festlegen. Der verbleibende Platz wird im Verhältnis 1:3 auf die Spalten 2 und 3 verteilt. Die einfache Angaben "10em 1fr" bedeutet: 10em für Spalte 1, und der Rest für Spalte 2.

Rolf