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.

* Learn more
* See full compatibility
* Report feedback
La fonction CSS (en-US) **`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 :

* grid-template-columns
* grid-template-rows
* grid-auto-columns
* grid-auto-rows
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 with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* Guide sur les grilles CSS : *Concepts de bases pour le dimensionnement des pistes avec minmax()*
* Valeurs logiques, modes d'écriture et grilles CSS (en-US)
* Tutoriel vidéo (en anglais) : Introduction à minmax()