Minmax() - Fonction CSS

Description de la fonction minmax().

La fonction minmax() définit une dimension comprise entre deux valeurs, pour le dimensionnement des colonnes et des lignes d'une grille.

La fonction minmax() peut être utilisée avec :

• grid-auto-columns : Définit la largeur par défaut des colonnes dans une grille.
• grid-auto-rows : Définit la hauteur par défaut des lignes dans une grille.
• grid-template-columns : Définit le nombre et la largeur des colonnes d'une grille.
• grid-template-rows : Définit le nombre et la hauteur des lignes d'une grille.

Syntaxes de la fonction minmax().

• grid-auto-columns: minmax(100px, 300px); min max

  min et max peuvent être :

  • Deux valeurs numériques positives ou nulles, suivies d'une unité de dimension (voir les unités de dimension). Notez en particulier l'unité fr, particulièrement adaptée à cet usage.
     
  • La valeur auto : le navigateur détermine la valeur suivant son algorithme habituel.
  • La valeur min-content : dimension déterminée en fonction du contenu, en la minimisant en ajoutant tous les retours à la ligne possibles.
  • La valeur max-content : dimension déterminée en fonction du contenu, sans ajouter de retours à la ligne.
  • La fonction fit-content : dimension optimisée en fonction du contenu et de la place disponible.

  Si la valeur indiquée pour max est inférieure à celle indiquée pour min, la fonction renvoie min.

  En faisant varier la largeur de conteneur grille ci-dessous, vous constaterez que la largeur de chacune des colonnes reste dans les limites spécifiées : entre 30 et 75 pixels.

  1

  2

  3

  4

  5
  grid-template-columns:repeat(4, minmax(min-content, max-content));

   

  Dans le deuxième exemple (ci-dessous) l'utilisation de min-content et max-content permet d'obtenir des colonnes jamais plus larges que nécessaire, mais de largeur toujours suffisante pour le contenu.

  Cette cellule contient relativement beaucoup de texte

  Peu de texte

  Rien

  Texte de longueur moyenne
  grid-template-columns:repeat(4, minmax(min-content, max-content));

Simulateur avec la fonction minmax()

Compatibilité et prise en charge par les navigateurs.

Les navigateurs actuels traitent correctement la fonction minmax() pour le dimensionnement des lignes et des colonnes d'une grille.

1

Fonction
minmax()

Estimation de la prise en charge globale.

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

Firefox

Chrome

Safari

Edge

Opéra

Chrome pour Androïd

Safari sur IOS

Samsung Internet

UC Browser pour Androïd

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction minmax().

• Module CSS - Mise en page par grille - Niveau 1

  Introduction des grilles pour les mises en page, et de la fonction minmax() pour définir de façon souple la largeur des colonnes ou la hauteur des lignes.
  

  07 Avril 2011

  Document de travail.

  

  29 Septembre 2016

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 2

  Pas de changement concernant la fonction minmax().
  

  06 Février 2018

  Document de travail.

  

  18 Août 2020

  Candidat à la recommandation.

  

  

• Module CSS - Mise en page par grille - Niveau 3

  Pas de changement concernant la fonction minmax().
  

  19 Septembre 2024

  Document de travail.

  

  

  

Voir aussi, dans le même module de standardisation que minmax().

Les spécifications CSS éditées par le W3C sont organisées en modules. minmax() fait partie du module CSS - Mise en page par grille (CSS Grid Layout Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :