In this section, we will learn what the grid-area property is and how to use it in CSS.
CSS grid-area Property Definition and Usage
When we compartmentalize a grid using `grid-template-areas` property, we need a way to actually position each grid-item in one of these areas.
This is where the CSS `grid-area` property comes in. This property is used to position each grid-item in a specific area that is created by `grid-template-area`.
CSS grid-area Property Syntax
grid-area: grid-area-name; grid-area: grid-start-row/ grid-start-column / grid-end-row/ grid-end-column;
CSS grid-area Property Value
The value we set for this property is the name of an area that was created by the `grid-template-areas` property.
The `grid-area` property is also a shorthand property to set the values for `grid-row-start`, `grid-column-start`, `grid-row-end` and `grid-column-end`. As the syntax of this property shows, we can use the values of the mentioned properties in the `grid-area` property as well.
Note: we use forward slash “/” in order to separate properties’ values from each other.