minmax()

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)

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.

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

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

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

• grid-template-columns
• grid-template-rows
• grid-auto-columns
• grid-auto-rows

#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;
}

<div id="container">
  <div>
    Item aussi large que le contenu jusqu'à 300 pixels max.
  </div>
  <div>
    Item avec une largeur flexible minimale de 200 pixels.
  </div>
  <div>
    Item inflexible de 150 pixels de large.
  </div>
</div>

• Un tutoriel vidéo : Introduction à minmax() (en anglais)
• Les grilles CSS : les valeurs logiques et les modes d'écriture