Une zone de grille est une grid cells (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.

Image showing a highlighted grid area

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é grid-area  et mis sur la grille en utilisant 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.

.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>

En apprendre plus

Références de propriété

En lire plus

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : loella16
 Dernière mise à jour par : loella16,