Aller au contenu

Nommer des zones dans une grille avec grid-template-areas

La propriété grid-template-areas permet de nommer des zones dans une grille. Cette approche rend la disposition des éléments plus facile à conceptualiser.

Exemple :

grid-template-areas:
  "menu contenu"
  "menu footer";



Autre exemple :

grid-template-areas permet de dessiner la grille en nommant des zones directement dans le CSS sur la conteneur de la grille.

.grid {
  display: grid;
  grid-template-areas: 
    "menu content content content"
    "menu content content content "
    "footer footer  footer footer";
}

Ensuite, grid-area appliqué sur les éléments enfants, permet d'attribuer celui-ci à une zone spécifique définie dans grid-template-areas.

.no1 { grid-area: menu; }
.no2 { grid-area: content; }
.no3 { grid-area: footer; }

👉 Ici :

  • La zone "menu" occupe la première colonne sur toute la hauteur, comme un barre latérale.
  • La zone "content" remplit l’espace central (3 colonnes sur 2 rangées).
  • La zone "footer" s’étend sur toute la largeur en bas.

See the Pen Grid - grid-template-area by TIM Montmorency (@tim-momo) on CodePen.

Warning

Ne pas mettre de virgule , entre chaque ligne.

Alert

grid-template-areas prend toujours un s à la fin.


  En savoir plus sur grid-template-areas