fit-content()

Die fit-content() CSS-Funktion klemmt eine gegebene Größe an eine verfügbare Größe gemäß der Formel min(maximale Größe, max(minimale Größe, Argument)).

Probieren Sie es aus

Die Funktion kann als Spurgröße in CSS Grid-Eigenschaften verwendet werden, wobei die maximale Größe durch max-content und die minimale Größe durch auto definiert ist. Diese wird ähnlich wie auto berechnet (d. h. minmax(auto, max-content)), außer dass die Spurgröße bei Argument geklemmt wird, wenn dieser größer als das minimale auto ist.

Weitere Informationen zu den Schlüsselbegriffen max-content und auto finden Sie auf der Seite grid-template-columns.

Die fit-content()-Funktion kann auch als ausgelegte Boxgröße für width, height, min-width, min-height, max-width und max-height verwendet werden, wobei die maximalen und minimalen Größen sich auf die Inhaltsgröße beziehen.

Syntax

Die fit-content()-Funktion akzeptiert ein <length> oder ein <percentage> als Argument.

css
/* <length> values */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/* <percentage> value */
fit-content(40%)

Werte

<length>

Eine absolute Länge.

<percentage>

Ein Prozentsatz relativ zum verfügbaren Platz in der gegebenen Achse.

In Grid-Eigenschaften bezieht sich dieser auf die Inline-Größe des Grid-Containers in Spalten-Tracks und auf die Blockgröße des Grid-Containers für Reihen-Tracks. Andernfalls bezieht es sich auf die verfügbare Inline-Größe oder Blockgröße der ausgelegten Box, abhängig vom Schreibmodus.

Formale Syntax

<fit-content()> = 
fit-content( <length-percentage> )

<length-percentage> =
<length> |
<percentage>

Beispiele

Grid-Spalten mit fit-content dimensionieren

HTML

html
<div id="container">
  <div>Item as wide as the content.</div>
  <div>
    Item with more text in it. Because the contents of it are wider than the
    maximum width, it is clamped at 300 pixels.
  </div>
  <div>Flexible item</div>
</div>

CSS

css
#container {
  display: grid;
  grid-template-columns: fit-content(300px) fit-content(300px) 1fr;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}

Ergebnis

Spezifikationen

Specification
CSS Grid Layout Module Level 2
# funcdef-grid-template-columns-fit-content
CSS Box Sizing Module Level 3
# funcdef-width-fit-content

Browser-Kompatibilität

css.properties.grid-template-columns.fit-content

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fit-content()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

css.properties.width.fit-content_function

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
fit-content()
Experimental

Legend

Tip: you can click/tap on a cell for more information.

No support
No support
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.

Siehe auch