grid-template-rows CSS propriété

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

La propriété de Grid CSS grid-template-rows permet définir une grille explicite en spécifiant la taille de chaque ligne de la grille Css au sein de leur conteneur Grid Css et implicitement le nombre de lignes en fonction des tailles déclarées.

/* Grille Css de 2 lignes */
grid-template-rows : 1fr 2fr ;
/* Grille Css de 3 lignes */
grid-template-rows : 1% 3% 30px; 
/* Grille Css de 2 lignes */
grid-template-rows : minmax(100px, 2fr) max-content;
/* Grille Css de 2 lignes */
grid-template-rows : repeat(100px, 2fr) max-content;
/* Grille Css de 3 lignes */
grid-template-rows : [header] 150px [footer] max-content [main-start main-end] 1fr;
/* Grille Css de 7 lignes */
grid-template-rows : 10px repeat(2, 1fr auto minmax(30%, 1fr));  

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

• auto : utilise tout l'espace possible pour cette ligne, équivaut à minmax(auto, auto).
• 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.)
• repeat( Répétition, Motif de ligne(s) ) : spécifie que le Motif de ligne(s) se répète sur Répétition lignes, donc faire repeat(2, [t] 1fr [u]) revient à [t] 1fr [u t] 1fr [u].
  Répétition peut aussi prendre la valeur de auto-fill ou auto-fit.

• none : spécifie qu'il n'y a pas de taille définie explicitement. Valeur par défaut.

• [Identifiant] : liste d'identifiants entre crochet qui identifient une ligne. vous pouvez mettre un ou plusieurs noms d'identifiant séparés par un espace.

• -start : dans ce cas là c'est un identifiant de début de ligne (Identifiant-start), voir la propriété Css grid-row-start.
• -end : dans ce cas là c'est un identifiant de fin de ligne (Identifiant-end), voir la propriété Css grid-row-end.
• Sinon c'est un identifiant de début et fin de ligne.

Exemple de code grid-template-rows CSS

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

La propriété de feuille de style grid-template-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-template-rows peut être mise directement dans la propriété de raccourci CSS grid-template ou grid.

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

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

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

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