Recommandation de cours :

Fonction fit-content() de CSS

La définition et l'utilisation de CSS fit-content() La fonction permet d'ajuster la taille de l'élément en fonction du contenu. Ce mode de fonctionnement est similaire à l'utilisation de l'espace disponible par l'élément, mais ne dépasse jamais la taille maximale du contenu.

Exemple

Utiliser fit-content() Ajuster la taille des colonnes du grille :

#container {
  display: grid;
  grid-template-columns: fit-content(250px) fit-content(250px) auto;
  grid-gap: 7px;
  box-sizing: border-box;
  height: 150px;
  width: 100%;
  background-color: green;
  padding: 7px;
}

Essayez-le vous-même

Syntaxe CSS

fit-content(length|percentage)
Valeur Description
length Définir la valeur de longueur absolue de la taille.
percentage Définir la taille en pourcentage par rapport à l'espace disponible.

Détails techniques

Version : CSS4

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
57 16 52 10.1 44

Pages connexes

Référence :Propriété grid-auto-columns de CSS

Référence :Propriété grid-auto-rows de CSS

Référence :propriété grid-template-columns de CSS

Référence :propriété grid-template-rows de CSS