minmax()
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 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
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
- 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()