Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété grid-template-areas permet de définir des zones de grille nommées.
Ces zones ne sont pas associées à un objet de la grille mais peuvent être utilisées avec les propriétés de placement : grid-row-start, grid-row-end, grid-column-start, grid-column-end et les méthodes de raccourci correspondantes grid-row, grid-column, and grid-area.
| Valeur initiale | none |
|---|---|
| Applicabilité | conteneurs de grille |
| Héritée | non |
| Média | visuel |
| Valeur calculée | comme spécifié |
| Animable | non |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* Valeur avec un mot-clé */
grid-template-areas: none;
/* Valeurs de chaînes */
/* Type <string> */
grid-template-areas: "a b";
grid-template-areas: "a b b"
"a c d";
/* Valeurs globales */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;
Valeurs
none- Le conteneur de grille ne définit aucune zone de grille nommée.
<string>+- Un ligne est créée pour chaque chaîne. Une colonne est créée pour chaque composant de la chaîne de caractères. Si on a un même composant réutilisé sur différentes lignes, cela créera une cellule sur les différentes lignes et colonnes. Il est nécessaire que ces cellules forment un rectangle, sinon, la déclaration est invalide.
Syntaxe formelle
none | <string>+
Exemple
HTML
<section id="page"> <header>En-tête</header> <nav>Navigation</nav> <main>Zone principale</main> <footer>Pied de page</footer> </section>
CSS
#page {
display: grid;
width: 100%;
height: 250px;
grid-template-areas: "head head"
"nav main"
"nav foot";
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}
#page > header {
grid-area: head;
background-color: #8ca0ff;
}
#page > nav {
grid-area: nav;
background-color: #ffa08c;
}
#page > main {
grid-area: main;
background-color: #ffff64;
}
#page > footer {
grid-area: foot;
background-color: #8cffa0;
}
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Grid Layout La définition de 'grid-template-areas' dans cette spécification. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Edge | Opera | Safari |
|---|---|---|---|---|---|---|
| Support simple | 29.0[1] | 40.0 (40.0)[2] | Pas de support[3] | Pas de support[3] | 28.0[1] | Nightly build-webkit |
| Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Support simple | Pas de support | Pas de support | Pas de support[3] | Pas de support | Pas de support |
[1] Fonctionnalité implémentée, disponible via le marqueur fonctionnalités expérimentales de Web Platform sous chrome://flags.
[2] Fonctionnalité implémentée, accessible via la préférence layout.css.grid.enabled, qui vaut false par défaut (désactivée donc).
[3] Internet Explorer et Edge implémentent une ancienne version de la spécification qui ne définit pas cette propriété.