grid-template-columns CSS propriété

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

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

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

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

• auto : utilise tout l'espace possible pour cette colonne, é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 colonne 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 colonne.
• min-content : applique la longueur la plus petite des éléments formant la colonne.
• minmax(min, max) : min définit la taille minimale et max définit la taille maximale de la colonne.
  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 colonne(s) ) : spécifie que le Motif de colonne(s) se répète sur Répétition colonnes, 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 colonne. 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 colonne (Identifiant-start), voir la propriété Css grid-column-start.
• -end : dans ce cas là c'est un identifiant de fin de colonne (Identifiant-end), voir la propriété Css grid-column-end.
• Sinon c'est un identifiant de début et fin de colonne.

Exemple de code grid-template-columns CSS

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

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

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

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

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

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