grid-template-areas mahdollistaa ruudukon visuaalisen asettamisen nimeämällä alueita, jolloin monimutkaiset sivuasettelut ovat luettavia ja helppo järjestää uudelleen responsiivisesti.
Nimettyjen alueiden määrittäminen
{
: grid;
: fr;
: auto fr auto;
:
;
: ;
}
{ : header; }
{ : sidebar; }
{ : main; }
{ : footer; }
