Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La fonction CSS minmax() définit un intervalle de taille compris (au sens large) entre min et max. Cette fonction est utilisée avec les grilles CSS.

/* Valeurs <inflexible-breadth>, <track-breadth> */
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/* Valeurs <fixed-breadth>, <track-breadth> */
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/* Valeurs <inflexible-breadth>, <fixed-breadth> */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)

Syntaxe

Une fonction qui prend en entrée deux arguments : min et max.

Chaque paramètre peut être une longueur, un pourcentage, un facteur de flexibilité ou l'un des mots-clés parmi max-content, min-content ou auto.

Si max < min, max est ignoré et minmax(min,max) correspond à min. Utilisé comme maximum, une valeur <flex> permet de définir le facteur de flexibilité d'une piste de la grille, elle est invalide comme minimum.

Valeurs

<length>
Une longueur positive (cf. le type <length>).
<percentage>
Un pourcentage (<percentage>) positif, relatif à la taille en ligne du conteneur pour les colonnes et à la taille en bloc pour les lignes du conteneur. Si la taille de la grille dépend de la taille de ses pistes, la valeur devra être traitée comme auto. L'agent utilisateur peut ajuster les contributions des tailles intrinsèques à la taille de la piste du conteneur de la grille et augmenter la taille finale de la piste par l'écart minimal nécessaire pour respecter ce pourcentage.
<flex>
Une dimension positive avec l'unité fr qui définit le facteur de flexibilité de la piste (cf. <flex>). Chaque piste avec un tel coefficient <flex> occupe une partie de l'espace disponible restant en fonction de son facteur de flexibilité.
max-content
Cette valeur représente la plus grande valeur max-content contribuant aux objets de la grille qui occupent la piste.
min-content
Cette valeur représente la plus grande valeur min-content contribuant aux objets de la grille qui occupent la piste
auto
Utilisé comme maximum, c'est un synonyme de max-content. Utilisé comme un minimum, il représente le plus grand des minima (selon  min-width/min-height) des objets de la grille qui occupent la piste.

Syntaxe formelle

minmax( [ <length> | <percentage> | <flex> | min-content | max-content | auto ] , [ <length> | <percentage> | <flex> | min-content | max-content | auto ] )

Propriétés CSS applicables

La fonction minmax() peut être utilisée avec les propriétés suivantes :

Exemples

CSS

#container {
  display: grid;
  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
  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>Un objet aussi large que le contenu.</div>
  <div>
    Un objet avec plus de texte dedans. Son contenu est plus 
    large que la largeur maximale, il est donc ramené à 300 
    pixels.
  </div>
  <div>Un objet flexible</div>
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Grid Layout
La définition de 'minmax()' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 57
Support complet 57
Support complet 29
Désactivée
Désactivée From version 29: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 12Firefox Support complet 52
Support complet 52
Support complet 40
Désactivée
Désactivée From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE ? Opera Support complet 44
Support complet 44
Support complet 28
Désactivée
Désactivée From version 28: this feature is behind the Enable experimental Web Platform features preference.
Safari Support complet 10.1WebView Android Aucun support NonChrome Android ? Edge Mobile Support complet 12Firefox Android Support complet 52
Support complet 52
Support complet 40
Désactivée
Désactivée From version 40: this feature is behind the layout.css.grid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Aucun support NonSafari iOS Support complet 10.3Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : lp177, SphinxKnight
Dernière mise à jour par : lp177,