Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Fonction minmax()

Description de la fonction minmax().

La fonction minmax() définit une dimension comprise entre deux valeurs, pour le dimensionnement des colonnes et des lignes d'une grille.

La fonction minmax() peut être utilisée avec :

Syntaxe de la fonction minmax().

  • grid-auto-columns: minmax(100px, 300px); min max

    min et max peuvent être :

    1. Deux valeurs numériques positives ou nulles, suivies d'une unité de dimension (voir les unités de dimensions en CSS). Notez en particulier l'unité fr, particulièrement adaptée à cet usage.
       
    2. La valeur auto : le navigateur détermine la valeur suivant son algorithme habituel.
       
    3. La valeur min-content : dimension déterminée en fonction du contenu, en la minimisant en ajoutant tous les retours à la ligne possibles.
       
    4. La valeur max-content : dimension déterminée en fonction du contenu, sans ajouter de retours à la ligne.
       

    Si la valeur indiquée pour max est inférieure à celle indiquée pour min, la fonction renvoie min.

Simulateur.

grid-template-columns:
( min max )
HTML : Hyper Text Markup Language
CSS : Cascading Style Sheets
JS : Javascript
XML : Extended Markup Language

Voir aussi...

Grilles - Propriétés.

  • align-content : Disposition des lignes dans un flex-box ou une grille.
  • align-items : Disposition verticale des éléments dans un flex-box ou une grille.
  • align-self : Position verticale de l'un des éléments dans un flex-box ou une grille.
  • grid : Propriété raccourcis définissant les principaux paramètres d'une grille.
  • grid-area : Positionne un élément dans une zone nommée de la grille.
  • grid-auto-columns : Mode de calcul des colonnes 'auto' dans une grille.
  • grid-auto-flow : Mode de calcul de l'emplacement des éléments dans la grille.
  • grid-auto-rows : Mode de calcul de la hauteur 'auto' des lignes dans une grille.
  • grid-column : Numéro de colonne(s) d'un élément dans une grille.
  • grid-column-end : Numéro de la colonne de fin d'un élément dans une grille.
  • grid-column-gap : Ajuste l'espacement des colonnes dans une grille.
  • grid-column-start : Numéro de la colonne de début d'un élément dans une grille.
  • grid-gap : Ajuste l'espacement des lignes et des colonnes dans une grille.
  • grid-row : Numéro des lignes d'un élément dans une grille.
  • grid-row-end : Numéro de la ligne de fin d'un élément dans une grille.
  • grid-row-gap : Ajuste l'espacement des lignes dans une grille.
  • grid-row-start : Numéro de la ligne de départ d'un élément dans une grille.
  • grid-template : Largeur des colonnes et hauteur des lignes d'une grille.
  • grid-template-areas : Définition de zones nommées dans une grille
  • grid-template-columns : Définition du nombre et de la largeur des colonnes d'une grille.
  • grid-template-rows : Définition du nombre et de la hauteur des lignes d'une grille.
  • justify-content : Définit le positionnement horizontal dans un flex-box ou une grille.
  • justify-items : Gère l'alignement horizontal des éléments dans le container flex-box ou grille.
  • justify-self : Définit le positionnement horizontal d'un élément particulier dans un flex-box ou une grille.

Grilles - Fonctions.

  • repeat() : Répète une valeur un certain nombre de fois.

Fonctions de calcul - Fonctions.

  • attr() : Renvoie la valeur d'un attribut.
  • calc() : Calcule une valeur pour une propriété.
  • clamp() : Calcule une valeur entre deux valeurs extrêmes.
  • max() : Détermine la valeur la plus petite parmi une série de valeurs.
  • min() : Détermine la valeur la plus grande parmi une série de valeurs.