Les zones nommées de CSS Grid permettent de dessiner la mise en page par des noms : grid-template-areas décrit la disposition sous forme de texte, et chaque élément est assigné à sa zone avec grid-area. Elles rendent la structure lisible et facile à réorganiser selon la taille d'écran.
Exemple
grid-template-areas:
'entete entete'
'menu contenu';
header { grid-area: entete; }