CSS/Funktionen/fit-content()
Aus SELFHTML-Wiki
CSS | Funktionen
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
autoerhalten würde. - Das Maximum entspricht dem Wert, den man durch das Schlüsselwort
max-contentbekäme
- Das Minimum entspricht dem Wert, den man an dieser Stelle durch das Schlüsselwort
- 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.[1]
- Die Funktion wird in den CSS Grid Eigenschaften grid-auto-columns, grid-auto-rows, grid-template-columns und grid-template-rows verwendet.
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.[2]
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()
- ↑ Caniuse: [mdn-css_properties_width_fit-content_function fit-content() als Längenangabe]
- ↑ MDN: fit-content-Function als Längenangabe
- Browser-Support: caniuse.com
