grid-auto-rows CSS propriété

Définition de la CSS grid-auto-rows.

La propriété de Grid CSS grid-auto-rows permet de spécifier la taille par défaut de chaque ligne de la grille Css dont la taille n'est pas explicitement définie avec grid-template-rows au sein de leur conteneur Grid Css.

grid-auto-rows : 1fr;
grid-auto-rows : 150px;
grid-auto-rows : max-content;
grid-auto-rows : min-content; 
grid-auto-rows : minmax(100px, 500px);
grid-auto-rows : fit-content(100px);
grid-auto-rows : 10px 1fr 50%;

La propriété de feuille de style grid-auto-rows CSS peut prendre une/des valeurs de taille :

• auto : utilise tout l'espace possible pour cette colonne, équivaut à minmax(auto, auto). valeur par défaut.
• numérique positif suivi d'une unité de longueur CSS (px ou ex ou em, etc.).
• numérique positif suivi de % (pourcentage). La valeur est calculée en fonction de la valeur calculée de sa propriété CSS width.
• numérique positif suivi de fr (unité de facteur de flexibilité). Chaque ligne occupera une partie de l'espace restant en fonction de ce facteur.
• max-content : applique la longueur la plus grande des éléments formant la ligne.
• min-content : applique la longueur la plus petite des éléments formant la ligne.
• minmax(min, max) : min définit la taille minimale et max définit la taille maximale de la ligne.
  Si max est inférieur à min, il est ignoré et sa valeur vaudra alors celle de min.
  - max et min sont des numériques positifs suivi d'une unité de longueur CSS (px ou ex ou em ou % ou fr, etc.) ou [min|max]-content.
• fit-content( taille ) : représente la formule min(max-content, max(auto, taille )) qui est calculée comme pour auto (minmax(auto, max-content)). Si taille est plus grande que le minimum fourni par auto alors cette dernière est appliquée.
  - taille est un numérique positif suivi d'une unité de longueur CSS (px ou ex ou em ou %, etc.)

Exemple de code grid-auto-rows CSS

Conditions d'application de la CSS grid-auto-rows.

La propriété de feuille de style grid-auto-rows CSS est applicable sur l'ensemble des balises HTML ou XHTML, si elles sont un conteneur Grid Css type display:[inline-]grid.

La valeur de la CSS grid-auto-rows peut être mise directement dans la propriété de raccourci CSS grid.

Héritage des valeurs Css de grid-auto-rows.

Les balises filles HTML ou XHTML n'héritent pas de la propriété de feuille de style grid-auto-rows.

Problème d'interprétation de grid-auto-rows en Css.

Attention à ce jour (05-2019), la déclaration multiple de taille pour la propriéte Css grid-auto-rows n'est pas reconnue par FireFox.

Conditions d'animation de grid-auto-rows en CSS3.

La CSS grid-auto-rows est une propriété de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.