In this section, we will learn what the grid-area property is and how to use it in CSS.
Click here to run the example of grid-area property.
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.
Example: grid-area property in CSS
See the Pen grid-area property in CSS by Omid Dehghan (@enjoytutorials1) on CodePen.
Example: CSS grid-area property
See the Pen CSS grid-area property by Omid Dehghan (@enjoytutorials1) on CodePen.