Property: grid-area
The grid-area property is a shorthand property consisting of the following CSS properties:
grid-row-startgrid-column-startgrid-row-endgrid-column-end
According to MDN Web Docs:
If four <grid-line> values are specified, grid-row-start is set to the first value, grid-column-start is set to the second value, grid-row-end is set to the third value, and grid-column-end is set to the fourth value. When grid-column-end is omitted, if grid-column-start is a <custom-ident>, grid-column-end is set to that <custom-ident>; otherwise, it is set to auto. When grid-row-end is omitted, if grid-row-start is a <custom-ident>, grid-row-end is set to that <custom-ident>; otherwise, it is set to auto. When grid-column-start is omitted, if grid-row-start is a <custom-ident>, all four longhands are set to that value. Otherwise, it is set to auto. The grid-area property can also be set to a <custom-ident> which acts as a name for the area, which can then be placed using grid-template-areas.
Browser Compatability: grid-area
Data on support for the mdn-css__properties__grid-area feature across the major browsers
Demonstration: grid-area
CSS
IS
AWESOME
Summary
This documentation page includes information about the following CSS property:
grid-area