minmax()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2017.
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
/* 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 commeauto
. 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 parmin-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
#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
Spécifications
Specification |
---|
CSS Grid Layout Module Level 2 # funcdef-grid-template-columns-minmax |
Compatibilité des navigateurs
BCD tables only load in the browser
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
- Tutoriel vidéo (en anglais) : Introduction à minmax()