grid-area
Assigne un élément à une zone nommée de la grille, ou règle en une fois ses lignes et ses colonnes.
- Valeur initiale
auto- Héritée
- Non
- Animable
- non
- S’applique à
- éléments grid et éléments en position absolue dans un conteneur grid
- JavaScript
element.style.gridArea = "sidebar"
Exemple
#.profile {
display: grid;
grid-template-areas:
"avatar name"
"avatar level";
grid-template-columns: 56px 1fr;
column-gap: 12px;
}
.avatar { grid-area: avatar; }
.name { grid-area: name; }
.level { grid-area: level; }<div class="profile stage">
<div class="box avatar" style="grid-area: avatar">LD</div>
<strong class="name" style="grid-area: name">Léa Dupont</strong>
<span class="level" style="grid-area: level">Niveau 7 · 1240 EXP</span>
</div>Définition et utilisation
#La propriété grid-area a deux usages. Le plus souvent, on lui donne le nom d’une zone définie dans grid-template-areas du parent, par exemple grid-area: sidebar, et l’élément se place à cet endroit.
Elle peut aussi servir de raccourci pour quatre lignes : grid-area: 1 / 1 / 3 / 3 représente dans l’ordre le début de ligne, le début de colonne, la fin de ligne et la fin de colonne.
Les zones nommées rendent le code lisible : on voit tout de suite où va l’élément, sans compter les lignes.
Syntaxe
#grid-area: <nom> | <ligne-début> / <colonne-début> / <ligne-fin> / <colonne-fin>;Valeurs
#- Emplacement automatique dans la grille.
<nom>
L’élément va dans la zone « a » (2 × 2 cellules).quatre lignes
Lignes 1-2 et colonnes 2-3.
Valeurs en pratique
#auto
.target { grid-area: auto; }a
.target { grid-area: a; }1 / 2 / 3 / 4
.target { grid-area: 1 / 2 / 3 / 4; }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
#- Vous écrivez les noms de zones dans
grid-areasans guillemets, et dansgrid-template-areasavec des guillemets. - L’ordre des quatre valeurs est : début de ligne, début de colonne, fin de ligne, fin de colonne. On le confond facilement avec l’ordre des marges.
Entrées associées
#- grid-template-areasDécrit la mise en page de la grille avec des zones nommées, presque comme un dessin dans le code.
- grid-columnDétermine dans quelles colonnes de la grille un élément commence et se termine.
- grid-rowDétermine dans quelles lignes de la grille un élément commence et se termine.
- orderChange l’ordre d’affichage d’un élément dans un conteneur flex ou grid.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.