CSS/Funktionen/fit-content()

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

Parameter	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.
anwendbar auf	Die Funktion wird in den CSS Grid Eigenschaften grid-auto-columns, grid-auto-rows, grid-template-columns und grid-template-rows verwendet. Für die Zukunft ist eine Verwendung in width, height, min-width, min-height, max-width und max-height geplant.
Browsersupport	caniuse: mdn-css_properties_grid-template-rows_fit-content

Beispiel

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-Minimun ist.

Weblinks

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

Siehe auch

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