CSS properties I learned today:

GRID-TEMPLATE-AREA:
​This property allows us to define named grid areas visually. Instead of calculating percentages or pixel values, we can map out our layout like a blueprint!
Example:
.container {
display: grid;
grid-template-areas:
"header header header"
"Left.nav mainContent Right.nav"
"footer footer footer";
}
GRID-AREA:
​Used inside child elements to assign them to a specific named section in grid-template-areas.
Example:
.child{
grid-area:header;
}