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

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: rgba(0, 0, 255, 0.2);
  border: 3px solid blue;
  text-align: left;
}

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

Siehe die grid-template-columns Seite für mehr Informationen über die max-content und auto Schlüsselwörter.

Die fit-content()-Funktion kann auch als festgelegte Boxengröße 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

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 Raster-Eigenschaften ist er relativ zur Inline-Größe des Raster-Containers in Spalten-Tracks und zur Blockgröße des Raster-Containers für Zeilen-Tracks. Andernfalls ist er relativ zur verfügbaren Inline-Größe oder Blockgröße der festgelegten Box, abhängig vom Schreibmodus.

Formale Syntax

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

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

Beispiele

Größenanpassung von Rasterspalten mit fit-content

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