grid-template-areas
Décrit la mise en page de la grille avec des zones nommées, presque comme un dessin dans le code.
- Valeur initiale
none- Héritée
- Non
- Animable
- non
- S’applique à
- conteneurs grid
- JavaScript
element.style.gridTemplateAreas = '"head head" "side main"'
Exemple
#.layout {
display: grid;
grid-template-columns: 120px 1fr;
grid-template-areas:
"header header"
"menu content";
gap: 8px;
}
.layout header { grid-area: header; }
.layout nav { grid-area: menu; }
.layout main { grid-area: content; }<div class="layout stage">
<header class="box" style="grid-area: header">CodeWorlds</header>
<nav class="box" style="grid-area: menu">Menu</nav>
<main class="box" style="grid-area: content">Leçon 4 : Grid</main>
</div>Définition et utilisation
#La propriété grid-template-areas permet de dessiner la mise en page avec des chaînes de caractères. Chaque chaîne représente une ligne, et les mots qu’elle contient sont les noms des cellules. Répéter le même nom dans des cellules voisines les réunit en une seule zone.
Vous attribuez les zones aux éléments avec la propriété grid-area, par exemple grid-area: sidebar. Un point (.) représente une cellule vide. Les zones doivent être rectangulaires, une forme en L n’est pas autorisée.
C’est la façon la plus lisible de décrire toute la mise en page d’une page. Sur téléphone, il suffit de donner un autre dessin dans une requête @media, et les éléments se réorganisent tout seuls.
Syntaxe
#grid-template-areas: none | "<nom> <nom> …" "<nom> …" …;Valeurs
#"head head" "side main" "foot foot"
En-tête et pied de page sur toute la largeur, panneau latéral et contenu au milieu."head side" "main side" "foot side"
Le panneau latéral occupe toute la hauteur à droite."head head" ". main" "foot foot"
avec un point
Le point laisse une cellule vide. L’élément side n’a pas de zone propre, donc il va dans la cellule libre à la fin.
Valeurs en pratique
#"head head" "side main" "foot foot"
.demo { grid-template-areas: "head head" "side main" "foot foot"; }"head side" "main side" "foot side"
.demo { grid-template-areas: "head side" "main side" "foot side"; }"head head" ". main" "foot foot"
.demo { grid-template-areas: "head head" ". main" "foot foot"; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Alignez les noms en colonnes avec des espaces. Le code ressemble alors à une carte de la mise en page et se lit facilement.
- Chaque ligne doit avoir le même nombre de cellules, et les zones doivent être rectangulaires. Sinon, toute la déclaration est ignorée.
Entrées associées
#- grid-areaAssigne un élément à une zone nommée de la grille, ou règle en une fois ses lignes et ses colonnes.
- grid-templateRaccourci qui règle les lignes, les colonnes et les zones nommées de la grille en une seule déclaration.
- grid-template-columnsDéfinit les colonnes de la grille : leur nombre et leur largeur.
- grid-template-rowsDéfinit les lignes de la grille : leur nombre et leur hauteur.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.