CSS/Funktionen/fit-content()

Browserunterstützung
caniuse.com

Die CSS-Funktion fit-content() dient dazu, einem Element oder einem Grid-Track eine flexible Größe (Breite oder Höhe) zuzuordnen, basierend auf seinem Inhalt. Sie erweitert das Schlüsselwort fit-content um einen Begrenzungswert. Für die Verwendung der fit-content()-Funktion außerhalb von Grid-Templates überprüfen Sie bitte die Browserkompatibilität bei caniuse.com.

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 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( limit )

Parameter

limit: <Längenangabe> | <Prozentangabe>

Die tatsächlich genutzte Größe berechnet sich aus der minimalen und maximalen Größe, die sich aus dem Inhalt des Elements oder der Grid-Zelle ergibt, und dem Begrenzungswert. Unsere Quellen geben hierfür unterschiedliche Formeln an, die aber zum gleichen Ergebnis führen:

• größe = min(maximum, max(limit, minimum))
  
• größe = max(minimum, min(limit, maximum))

Zu lesen ist das so:

• Ist minimum größer als das Limit, wird minimum als Größe verwendet
• Liegt das Limit zwischen minimum und maximum, wird das Limit als Größe verwendet
• Ist maximum kleiner als das Limit, wird maximum als Größe verwendet

Das minimum entspricht in Grids dem auto-Wert. Das ist zumeist der min-content-Wert, kann aber auch 0 sein (z. B. wenn die Items im Track Scrolling erlauben). Für die Größenangabe von Elementen ist es min-content.

Das maximum entspricht in Grids höchstens dem max-content-Wert. Die Spec erwähnt es nicht, aber zumindest Chrome begrenzt das Maximum so, dass die Tracks in der jeweiligen Achse nicht größer werden als der Grid-Container. Der minimum-Wert wird dabei aber nicht unterschritten. Für die Größenangabe von Elementen ist das Maximum max-content.

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