minmax()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

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.

Exemple interactif

Syntaxe

css
/* 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 inférieur à min, alors max sera ignoré et minmax(min,max) sera considéré comme min. Utilisée comme valeur maximale, une valeur de type <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

<length>

Une longueur non-négative.

<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.

<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 min-width/min-height) des objets de la grille qui occupent la piste.

Syntaxe formelle

<minmax()> = 
  minmax( min , max )

Propriétés CSS associées

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

Exemples

CSS

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

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

Spécifications

Specification
CSS Grid Layout Module Level 2
# valdef-grid-template-columns-minmax

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi