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.