'Does grid-area in CSS have two meanings?

Is grid-area used with grid-template-areas, like the example below

               grid-template-areas: "head head"
                   "nav  main"
                   "nav  foot";


   
             #page > header {
             grid-area: head;
             background-color: #8ca0ff;
                }

And also as a shorthand for grid-row-start, grid-column-start, grid-row-end, grid-column-end?

csscss-grid


Solution 1:[1]

If you inspect the element you can better understand

enter image description here

It's always the shorthand of the properties you mentioned. Now if you check the syntax of such properties you will notice that it can take different values.

The named areas belong to <cutom-indent>

Related questions for more detail:

CSS grid and specifying multiple areas

CSS Grid: grid-row/column-start/end VS grid-area + grid-template-area

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Temani Afif

Related Questions