fit-content()

Die fit-content() CSS Funktion begrenzt eine gegebene Größe auf eine verfügbare Größe gemäß der Formel min(maximum size, max(minimum size, 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 wird, was ähnlich wie auto berechnet wird (d.h. minmax(auto, max-content)), außer dass die Spurgröße auf das Argument begrenzt wird, wenn es größer ist als das minimale auto.

Siehe die Seite grid-template-columns für weitere Informationen zu den Schlüsselwörtern max-content und auto.

Die fit-content() Funktion kann auch als Größe eines angeordneten Kastens für width, height, min-width, min-height, max-width und max-height verwendet werden, wobei sich die maximalen und minimalen Größen 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 ist er relativ zur Inline-Größe des Grid-Containers bei Spalten-Spuren und zur Blockgröße des Grid-Containers für Zeilen-Spuren. Andernfalls ist er relativ zur verfügbaren Inline-Größe oder Blockgröße des angeordneten Kastens, abhängig vom Schreibmodus.

Formale Syntax

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

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

Beispiele

Grid-Spalten mit fit-content anpassen

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

Browser-Kompatibilität

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

BCD tables only load in the browser

css.properties.width.fit-content_function

BCD tables only load in the browser

Siehe auch