Zone de grille
Une zone de grille est une 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é 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.
Exemple
.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>
Voir aussi
Références de propriété
En lire plus
- Guide des grilles CSS : Les concepts de base des grilles CSS
- Guide des grilles CSS : Définir des zones sur une grille
- Définition des zones de grille dans la spécification dans les grilles CSS (en)