grid-template-areas CSS propriété

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

La propriété de Grid CSS grid-template-areas permet de définir une grille explicite en spécifiant un identifiant à chaque colonne d'une ligne de grille dans leur conteneur Grid Css.

grid-template-areas : none ;
/* Grille Css de 3 colonnes et 1 ligne */
grid-template-areas : "nomeA nomC nomC"; 
/* Grille Css de 3 colonnes et 2 lignes */
grid-template-areas : "nomeA nomC nomC"
                      "nomeA nomC .";
/* Grille Css de 3 colonnes et 2 lignes */
grid-template-areas : "nomeA nomC nomC" "nomeA nomC .";

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

• none : aucune zone nommée, valeur seule. Valeur par défaut.
• "chaine" : liste de noms de zones séparés par un espace (U+0020),le tout entre simple ou double quotte.
  - Un ou plusieurs "." (point U+002E) à la suite ne représente qu'une zone que vous ne voulez pas nommer. Si au contraire, ils sont séparés par un espace, chacun représente qu'une zone non nommée.

Exemple de code grid-template-areas CSS

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

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

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

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