Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Fonction fit-content()

Description de la fonction fit-content().

La fonction fit-content() calcule une dimension en se basant sur le contenu de l'élément et sur 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).

En gros, la fonction fit-content() choisit la meilleure dimension entre auto, min-content et max-content, restant toujours inférieure ou égale à la dimension qui lui est fournie en paramètre.

Pour plus d'informations sur min-content et max-content, reportez-vous à la propriété grid-template-columns.

La fonction fit-content() peut être utilisée avec :

Syntaxe de la fonction fit-content().

  • grid-auto-columns: fit-content(100px); l

    Une valeur positive ou nulle, suivie d'une unité de dimensions. Voir les unités de dimensions en CSS. Cette valeur représente la valeur maximale à ne pas dépasser.

Simulateur.

Le simulateur ci-dessous présente des grilles dont la deuxième colonne a une largeur définie par fit-content() ou, pour comparaison, une largeur fixe, auto, min-content et max-content. Vous pouvez modifier le texte dans la zone bleutée pour voir comment la fonction fit-content() prend en compte le contenu pour déterminer la largeur de la colonne.

grid-template-columns:
( valeur )

 

fit-content()
Tapez du texte ici
120px
Tapez du texte ici
auto
Tapez du texte ici
min-content
Tapez du texte ici
max-content
Tapez du texte ici