Recommandation de cours :

Fonction minmax() CSS

Définition et utilisation de CSS minmax() La fonction minmax() est utilisée pour le layout en grille CSS et définit une gamme de taille qui est supérieure ou égale au minimum et inférieure ou égale au maximum.

Exemple

Utilisation minmax() Définir la taille de la colonne de la grille :

.grid-container {
  display: grid;
  grid-template-columns: minmax(min-content, 350px) minmax(150px, 1fr) 120px;
  grid-gap: 5px;
  height: 150px;
  background-color: green;
  padding: 10px;
}

Essayez-le vous-même

Syntaxe CSS

minmax(min, max)
Valeur Description
min

Obligatoire. Valeur minimale.

Il peut s'agir de la longueur, du pourcentage, de la valeur élastique (fr) ou l'un des mots-clés suivants :

  • auto
  • max-content
  • min-content
max

Obligatoire. Valeur maximale.

Il peut s'agir de la longueur, du pourcentage, de la valeur élastique (fr) ou l'un des mots-clés suivants :

  • auto
  • max-content
  • min-content

Détails techniques

Version : Module de mise en page en grille CSS niveau 2

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
59 16 52 10.1 44

Pages associées

Référence :Fonction min() CSS

Référence :Fonction max() CSS

Référence :Propriété grid-template-columns CSS

Référence :Propriété grid-template-rows CSS

Référence :Attribut grid-auto-columns de CSS

Référence :Attribut grid-auto-rows de CSS