CSS/Funktionen/fit-content()

Browserunterstützung
caniuse.com

Die CSS-Funktion fit-content() definiert einen Größenbereich, der dem vorhandenen Inhalt entspricht. Sie erweitert das in den intrinsischen Abmessungen vorhandene Schlüsselwort fit-content um einen Maximalwert.

anwendbar auf

• Die Funktion wird in den CSS Grid Eigenschaften grid-auto-columns, grid-auto-rows, grid-template-columns und grid-template-rows verwendet.
  • Das Minimum entspricht dem Wert, den man an dieser Stelle durch das Schlüsselwort auto erhalten würde.
  • Das Maximum entspricht dem Wert, den man durch das Schlüsselwort max-content bekäme
• Das CSS Box-Sizing Level 4 Modul sieht darüber hinaus eine Verwendung in width, height, min-width, min-height, max-width und max-height vor. Der minimale und maximale Wert entsprechen dabei den min-content und max-content Werten.

Syntax

fit-content( <Längenangabe> | <Prozentangabe> )

Die fit-content()-Funktion passt eine gegebene Größe an die verfügbare Größe nach der Formel

min(maximum size, max(minimum size, argument)) 

an.

Die Funktion kann als Größenangabe in den Grid-Eigenschaften verwendet werden, in dem die maximale Größe durch max-content und die Mindestgröße durch auto (d. h. minmax(auto, max-content)) festgelegt ist.

Beispiel

body {
  grid-template-columns: fit-content(8ch) fit-content(8ch) 1fr;
}

Es werden 3 Spalten erzeugt, wobei die ersten beiden Spalten sich in der Breite nach dem Inhalt ausrichten, aber innerhalb der fit-content()-Funktion einen Maximalwert von 8ch haben.

Beachten Sie: Besonders ist, dass die track size clamped at argument ist, wenn sie größer als das auto-Minimum ist.

Siehe auch

• CSS/Tutorials/Boxmodell
  • Größenangaben intrinsische Abmessungen

Weblinks

• CSSWG CSS Grid Layout: fit-content(<length-percentage>)
• CSSWG: CSS Intrinsic & Extrinsic Sizing Module Level 3: fit-content(<length-percentage>)
• MDN: fit-content()

• Browser-Support: caniuse.com