Zone de grille

Une zone de grille se compose d'une ou plusieurs cellules de grille formant une zone rectangulaire sur la grille. Les zones de grille sont créées lors du placement d'un élément en utilisant le placement basé sur les lignes ou lors de la définition de zones avec les zones de grille nommées.

Un schéma illustrant une zone de grille en vert turquoise sur une grille quadrillée.

Les zones de grille sont obligatoirement rectangulaires. Il n'est pas possible de créer des zones de grille en forme de T ou de L par exemple.

Exemples

Dans l'exemple qui suit, on a un conteneur de grille avec deux éléments de grille. Ces éléments sont nommés à l'aide de la propriété grid-area et placés sur la grille à l'aide de grid-template-areas. On obtient ainsi deux zones de grille, la première couvrant quatre cellules de grille et la seconde couvrant deux cellules.

* {
  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;
}

css

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

html

<div class="wrapper">
  <div class="item1">Item</div>
  <div class="item2">Item</div>
</div>

Voir aussi

Référence des propriétés

Approfondir

Guide sur la disposition avec les grilles CSS : Les concepts de base des grilles CSS
Guide sur la disposition avec les grilles CSS Définir des zones sur une grille
La définition des zones de grille dans le module de spécification sur les grilles CSS