--- title: minmax() slug: Web/CSS/minmax() tags: - CSS - CSS Function - CSS Grid - Function - Layout - Reference - Web translation_of: Web/CSS/minmax() ---
{{CSSRef}}

La fonction CSS minmax() définit un intervalle de taille supérieure ou égale à min et inférieure ou égale à max. Elle est utilisée avec les grilles CSS.

{{EmbedInteractiveExample("pages/css/function-minmax.html")}}

Syntaxe

/* Valeurs de type <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 de type <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 de type <inflexible-breadth>, <fixed-breadth> */
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)

minmax() est une fonction qui prend deux paramètres, min et max.

Chaque paramètre peut être une longueur (type <length>), un pourcentage (type <percentage>), une valeur de type <flex> ou l'un des mots-clés max-content, min-content, ou auto.

Si max est supérieur à min, alors max sera ignoré et minmax(min,max) sera considéré comme min. Utilisée comme valeur maximale, une valeur de type {{cssxref("flex_value","<flex>")}} définit le facteur de flexibilité de la piste de la grille ; une telle valeur ne peut pas être utilisée comme minimum.

Valeurs

{{cssxref("<length>")}}
Une longueur non-négative.
{{cssxref("<percentage>")}}
Un pourcentage non-négatif. Cette valeur est relative à la taille en incise (inline) du conteneur de grille pour les pistes en colonnes et relative à la taille en bloc du conteneur de grille pour les pistes en lignes. Si la taille du conteneur de grille dépend de la taille de ses pistes, cette valeur <percentage> sera traitée comme auto. L'agent utilisateur pourra ajuster les contributions à la piste de taille intrinsèques selon la taille du conteneur de grille et augmenter la taille finale de la piste d'une quantité minimale pour respecter le pourcentage.
{{cssxref("<flex>")}}
Une valeur non-négative avec l'unité fr qui indique le facteur de flexibilité/extensibilité de la piste. Chaque piste dimensionnée avec une valeur de type <flex> occupera une part de l'espace restant proportionnellement à son coefficient de flexibilité.
max-content
Représente la plus grande contribution max-content pour les objets de la grille qui occupent la piste.
min-content
Représente la plus grande contribution min-content pour les objets de la grille qui occupent la piste.
auto
Utilisée comme maximum, cette valeur agira comme max-content. Utilisée comme minimum, elle représentera la plus grande des tailles minimales (définies par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des objets de la grille qui occupent la piste.

Syntaxe formelle

{{csssyntax}}

Propriétés CSS associées

minmax() peut être utilisée pour les propriétés suivantes :

Exemples

CSS

#container {
  display: grid;
  grid-template-columns: minmax(min-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>
    Aussi large que le contenu, large d'au plus 300 pixels.
  </div>
  <div>
    Item flexible mais dont la largeur vaut au moins 200 pixels.
  </div>
  <div>
    Item avec une largeur de 150 pixels.
  </div>
</div>

Résultat

{{EmbedLiveSample("Examples", "100%", 200)}}

Spécifications

Spécification État Commentaires
{{SpecName("CSS Grid", "#valdef-grid-template-columns-minmax", "minmax()")}} {{Spec2("CSS Grid")}} Définition initiale.

Compatibilité des navigateurs

{{Compat("css.properties.grid-template-columns.minmax")}}

Voir aussi