fit-content()

La fonction CSS fit-content() permet d'obtenir une dimension restreinte à un intervalle donné (en utilisant la formule min(taille maximale, max(taille minimale, argument)).

Exemple interactif

Cette fonction peut être utilisée pour définir la taille d'une piste via les propriétés relatives aux grilles CSS où la taille maximale est définie par max-content et où la taille minimale est définie par auto et qui est calculée de façon similaire à auto (i.e. minmax(auto, max-content)), sauf que la taille de la piste est ramenée à argument si celui-ci est supérieur à auto.

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

La fonction fit-content() peut également être utilisée pour définir la taille d'une boîte avec width, height, min-width, min-height, max-width et max-height où la taille maximale fait référence à la taille maximale du contenu et où la taille minimale fait référence à la taille minimale du contenu.

Syntaxe

La fonction fit-content() accepte un argument de type <length> ou <percentage>.

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 exprimée de façon absolue.

<percentage>

Un pourcentage relatif à l'espace disponible sur l'axe indiqué (la hauteur ou la largeur). Pour les propriétés qui concernent les grilles, le pourcentage est relatif à la dimension en ligne du conteneur de la grille pour les pistes qui sont disposées en colonnes et à la dimension en bloc pour les pistes qui sont disposées en lignes. Sinon, le pourcentage est relatif à la dimension en ligne ou en bloc selon le mode d'écriture utilisé.

Exemples

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;
}

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>

Résultat

must be provided

Spécifications

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

Compatibilité des navigateurs

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.

Voir aussi