Une zone de grille est une {{glossary("grid cell","cellule de grille")}} ou plus, qui constitue une zone rectangulaire sur la grille. Les zones de grille sont créées lorsque vous placez un élément en utilisant le placement de la ligne de base ou lors de la définition des zones par l'utilisation de zones de grille nommées.
Les zones de grille doivent être de nature rectangulaire ; il n'est pas possible de créer, par exemple, une zone de grille en forme de T ou de L.
Dans l'exemple ci-dessous, nous avons un conteneur de grille avec deux éléments de grille nommés à l'aide de la propriété {{cssxref("grid-area")}} et mis sur la grille en utilisant {{cssxref("grid-template-areas")}}. Cela crée deux zones de grille, l'une couvrant quatre cellules de la grille, et deux autres d'une seule cellule.
* {box-sizing: border-box;}
.wrapper {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
}
.wrapper > div {
border: 2px solid #ffa94d;
border-radius: 5px;
background-color: #ffd8a8;
padding: 1em;
color: #d9480f;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-rows: 100px 100px;
grid-template-areas:
"a a b"
"a a b";
}
.item1 {
grid-area: a;
}
.item2 {
grid-area: b;
}
<div class="wrapper"> <div class="item1">Item</div> <div class="item2">Item</div> </div>
{{ EmbedLiveSample('example_1', '300', '280') }}