What is the grid-area property?
The grid-area property is a short-hand way to place items on a grid using up to four values that indicate where the item should be on the grid. When four values are provided, the first value is grid-row-start, the second value is grid-column-start, the third value is grid-row-end, and the fourth value is grid-column-end. When three values are provided, the fourth, or grid-column-end, defaults to auto or custom-indent if one is provided for grid-column-start. The syntax custom-indent allows for naming a grid line. Like when three values are provided, when two values are provided, two values default to auto, unless a custom-indent is provided which means that both grid-row-end and grid-column-end default to auto, or grid-row-end becomes the custom-indent of grid-row-start, and grid-column-end becomes the custom-indent of grid-column-start.
Demonstration
CSS
IS
AWESOME