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>.
/* 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
#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
<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
Spécifications
| Specification |
|---|
| CSS Box Sizing Module Level 4 # sizing-values |
Compatibilité des navigateurs
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
Voir aussi
- Les mots-clés pour le dimensionnement :
min-content,max-content - Les propriétés correspondantes des grilles CSS :
- Les guides à propos de la disposition en grille