Größeneinheiten

^{Fixierte Einheiten}

px: Pixel – Feste Größe

^{Relative Einheiten}

%: Prozentualer Anteil der Containergröße.

Em: Ein em repräsentiert die vom Browser berechnete Schriftgröße des Elements. Dabei wird die Seitenlänge der Buchstaben als Referenz verwendet. Das entspricht ungefähr den Abmessungen des Großbuchstaben „M“. Wird die Schriftgröße selbst (font-size) in em festgelegt, bezieht sich die Einheit auf die Schriftgröße des Elternelements.

rem: Ein rem (root-em) entspricht der Schriftgröße, die für das Wurzelelement (in HTML das html-Element) festgelegt wurde. (Evtl. Änderungen der Schriftgröße in Elternelementen können so übersprungen werden)

vh: (Viewport-Height) Die Einheit vh entspricht dem 100. Teil der Höhe des Anzeigebereichs (Viewport). Es gilt also: 100vh = Höhe des Viewports.

vw: (Viewport-Width) Die Einheit vw entspricht dem 100. Teil der Breite des Anzeigebereichs (Viewport). Es gilt also: 100vw = Breite des Viewports.

^{Flexible Einheiten}

fr: Setzt die Größe auf einen Bruchteil des verbleibenden/verfügbaren zu füllenden Raumes.

auto: Setzt die Größe auf den minimalen Bedarf des vorhandenen Inhalts. Perfekt für die Höhenskalierung von Bildern.

min-content: Die Zellen werden so groß wie der kleinste Inhalt in der Achse.

max-content: Die Zellen werden so groß wie der größte Inhalt in der Achse.

fit-content: Die Zellen werden für den Inhalt passend skaliert.

minmax: Beschränkt die Größe zwischen min und max. Es können dabei auch zwei verschiedene Einheiten verwendet werden, zum Beispiel: “mindestens 200 px, aber höchstens 50 %“

Hinweis: repeat wird nicht unterstützt

Bildschirm Breakpoints

xs: extra-small (Mobile)

sm: small (Mobile Landscape)

md: medium (Tablet) 

lg: large (Tablet Landscape)

xl: extra-large (Desktop)