Fonction CSS fit-content() - CSS

Exemple interactif

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>Un. Cette colonne contient plus de texte.</div>
      <div>Deux</div>
      <div>Trois</div>
      <div>Quatre</div>
      <div>Cinq</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;
}

Cette fonction peut être utilisée comme taille de piste dans les propriétés de grille CSS, où la taille maximale est définie par max-content et la taille minimale par auto, qui est calculée de la même manière que auto (c'est-à-dire, minmax(auto, max-content)), sauf que la taille de la piste est ramenée à l'argument si celui-ci est supérieur à auto.

Voir la page grid-template-columns pour plus d'information les sur mots-clés max-content et auto.

La fonction fit-content() peut également être utilisée comme taille de boîte mise en page pour width, height, min-width, min-height, max-width et max-height, où les tailles maximale et minimale font référence à la taille du contenu.

Syntaxe

css

/* Valeurs de type <length> */
fit-content(200px)
fit-content(5cm)
fit-content(30vw)
fit-content(100ch)

/* Valeurs de type <percentage> */
fit-content(40%)

Valeurs

<length>

Une longueur absolue.

<percentage>

Un pourcentage relatif à l'espace disponible sur l'axe indiqué.

Pour les propriétés de grille, il est relatif à la taille en ligne du conteneur de la grille pour les pistes en colonnes et à la taille en bloc du conteneur de la grille pour les pistes en lignes. Sinon, il est relatif à la taille en ligne ou en bloc de la boîte mise en page en fonction du mode d'écriture.

Syntaxe formelle

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

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

Exemples

Dimensionner les colonnes de la grille avec `fit-content`

HTML

html

<div id="container">
  <div>Élément aussi large que le contenu.</div>
  <div>
    Un élément avec plus de texte à l'intérieur. Comme son conteneur est plus
    large que la largeur maximale, il est ramené sur 300 pixels.
  </div>
  <div>Un élément flexible</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;
}

Résultat

Spécifications

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

Le mot-clé min-content
Le mot-clé max-content
Le module de dimensionnement des boîtes CSS
La propriété grid-template
La propriété grid-template-rows
La propriété grid-template-columns
La propriété grid-template-areas
La propriété grid-auto-columns
La propriété grid-auto-rows
La propriété grid-auto-flow
Placer les éléments sur les lignes d'une grille CSS
Modèle de grille : Propriétés raccourcies pour définir les grilles CSS

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 7 mai 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

Fonction CSS `fit-content()`