Can you create your own grid area names?

HTML-CSS
1

Title probably doesn’t make much sense so here goes.

#header {grid-area: header;}
#container {grid-area: main;}
#footer {grid-area: footer;}

grid-template-areas: 
    'header'
    'main'
    'footer';

In the example above, are the grid areas such as header, main etc only usable names? Or can you use any name that you choose? So could I add an area under the header called section like so -

#header {grid-area: header;}
#section {grid-area: section;}
#container {grid-area: main;}
#footer {grid-area: footer;}

grid-template-areas: 
    'header'
    'section'
    'main'
    'footer';
2

Yes you can.

2 Likes