fit-content() - Fonction CSS
Résumé des caractéristiques de la fonction fit-content()
Description de la fonction fit-content()
.
La fonction fit-content()
calcule une dimension d'après le contenu de l'élément, tout en veillant à ce que cette dimension reste inférieure ou égale à la
limite indiquée.
Elle est surtout efficace pour définir la largeur des colonnes ou la hauteur des lignes d'une grille (voir grid-template-columns
et grid-template-rows
).
La spécification future devrait étendre son utilisation au dimensionnement des blocs (propriétés width
, height
,
min-width
, max-width
, min-height
et max-height
).
Les trois cellules ci-dessous ont toutes été dimensionnées avec fit-content(200px)
. On voit que la largeur des cellules s'agrandit en fonction
du contenu, mais ne dépasse jamais la limite des 200 pixels indiquée.
Remarque : il existe également une valeur prédéfinie fit-content
qui a un fonctionnement comparable à la fonction du même nom,
mais qui ne permet pas de définir une dimension maximale. La valeur fit-content
est cependant mieux reconnue par les navigateurs pour dimensionner des éléments
en dehors d'une grille. Plus d'infos sur la valeur fit-content
.
Reportez-vous également aux pages d'explication des valeurs min-content
et max-content
.
La fonction fit-content()
peut être utilisée avec :
grid-auto-columns
: Mode de calcul des colonnes 'auto' dans une grille.grid-auto-rows
: Mode de calcul de la hauteur 'auto' des lignes dans une grille.grid-template-columns
: Définition du nombre et de la largeur des colonnes d'une grille.grid-template-rows
: Définition du nombre et de la hauteur des lignes d'une grille.
Syntaxe de la fonction fit-content()
.
- grid-auto-columns: fit-content(100px);
fit-content()
attend une seule valeur, positive ou nulle, suivie d'une unité de dimensions, sauf l'unitéfr
. Voir les unités CSS de dimension. Cette valeur est traitée comme un maximum dans le calcul de la largeur optimale.
Simulateur.
Le simulateur manipule une grille de trois colonnes. La largeur de ces dernières est ajustée en fonction de la valeur que vous choisissez ci-dessous.
Compatibilité et prise en charge par les navigateurs.
Le tableau ci-dessous présente la prise en charge de la fonction fit-content()
dans trois cas de figure :
fit-content()
pour définir la largeur des colonnes d'une grille ou la hauteur des lignes, avec les propriétés
grid-template-columns
, grid-auto-columns
, grid-template-rows
et grid-auto-rows
.
fit-content()
pour définir la dimension des éléments d'un flex-box avec la propriété flex-basis
.
fit-content()
pour définir les dimensions d'un élément quelconque avec les propriétés width
,
height
, etc.
fit-content()
(Grid)
fit-content()
(Flex-box)
fit-content()
(Others)
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
Opéra
Opéra Mobile
Safari
Safari sur IOS
Samsung Internet
Voir aussi, dans le même module de standardisation que fit-content()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. fit-content()
fait partie du Module CSS - Dimensionnement des blocs (CSS Box Sizing Module). Les définitions suivantes sont également décrites dans ce même module.