fit-content()

Die fit-content() CSS Funktion beschränkt eine gegebene Größe auf eine verfügbare Größe nach der Formel min(maximum size, max(minimum size, argument)).

Probieren Sie es aus

grid-template-columns: fit-content(8ch) fit-content(8ch) 1fr;

grid-template-columns: fit-content(100px) fit-content(100px) 1fr;

grid-template-columns: fit-content(40%) fit-content(40%) 1fr;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">
      <div>One. This column has more text in it.</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  display: grid;
  grid-gap: 10px;
  width: 250px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  text-align: left;
}

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

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

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

Syntax

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 Raum in der gegebenen Achse.

In Grid-Eigenschaften ist es relativ zur Inline-Größe des Grid-Containers in Spaltentracks und zur Blockgröße des Grid-Containers für Reihentracks. Andernfalls bezieht es sich auf die verfügbare Inline-Größe oder Block-Größe der Layout-Box, abhängig vom Schreibmodus.

Formale Syntax

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

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

Beispiele

Grid-Spalten mit fit-content skalieren

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

css.properties.width.fit-content_function

Siehe auch