grid-template CSS propriété

grid-template : none;
grid-template : auto 50px / auto 100px auto;
grid-template : 'a b b' auto 'a c d' 50px / auto 100px auto;
grid-template: [header-top] "a a a" auto [header-bottom]
                 [main-top] "b b c" 70px [main-bottom]
                 [footer-top] "f f f" 50px [footer-bottom]
                 / auto 100px auto;

Propriétés CSS utilisées dans le raccourci grid-template.

Spécifier les propriétés de template de grille individuellement

Si vous ne voulez pas utiliser le raccourci de Grid Css grid-template, vous pouvez définir individuellement chaque propriété Css de début ou de fin de ligne Css d'un élément en utilisant une des propriétés de Grid CSS suivante :

• grid-template-rows : spécifie la taille d'une/des colonnes d'une gille Css.
• grid-template-columns : spécifie la taille d'une/des lignes d'une gille Css.
• grid-template-areas : spécifie l'identifiant d'une/des zones d'une gille Css.

.identifiant{
  grid-template-rows: auto 50px;
  grid-template-columns: auto 100px auto; 
  grid-template-areas: 'a b b' 'a c d'; 
}

Règles de syntaxes CSS pour grid-template.

Règle d'écriture de grid-row

Les valeurs de type ligne et colonne assignées à la propriété de Grid CSS grid-template doivent être séparées par un slash (/).
Les propriétés Css de grille grid-template-rows et grid-template-areas précèdent toujours slash. Ce dernier est toujours suivit de la propriété Css de grille grid-template-columns.

grid-template : grid-template-rows + grid-template-areas / grid-template-columns

Une des propriétés Css de grille grid-template-rows ou grid-template-areas peut être omise, mais pas les deux :

• La propriété omise prendra à ce moment-là, sa valeur par défaut.

grid-template : grid-template-rows / grid-template-columns
grid-template : grid-template-areas / grid-template-columns

Pour écrire le mixe de grid-template-rowset grid-template-areas, il faut raisonner par ligne. Pour chaque ligne vous devez :

• Mettre en premier l'identifiant de début de ligne, s'il y en a un [identtop],
• puis mettre le template area 'a b c',
• mettre la taille auto,
• et enfin l'identifiant de fin de ligne s'il y en a un [identbottom].

grid-template-areas: "a b c"
                     "d e f";
grid-template-rows: [identtop] auto [identbottom momidentop] 1fr [momidenbottom];
/* Se transforme en */ 
grid-template: [identtop] "a b c" auto [identbottom]
               [momidentop] "d e f" 1fr [momidenbottom]
               / .....;

Compatibilités navigateurs de la propriété grid-template

Votre avis sur la définition grid-template en CSS