Does grid-area in CSS have two meanings?

Question

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?

It’s fundamentally the same meaning - where to put the item. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area — A Haworth, May 13 '22 at 19:01

score 0 · Answer 1 · answered May 13 '22 at 20:51

If you inspect the element you can better understand

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>

Does grid-area in CSS have two meanings?

1 Answers1