CSS 19 💻 grid-template-areas, grid-area and grid-template

a - grid-template-areas
grid-template-areas defines a named grid area for each cell in a grid layout
It allows you to create visual grids by assigning area names
Specify the areas inside double quotes ""
header spans all three cells
sidebar, main and content occupy only one cell each
footer also spans all three cells
unused cells can be referred using null tokens
A null token is a sequence of one or more full stop '.'

b - grid-area
grid-area is used to position a grid item in a grid container.
It specifies which row, column, or both start and end positions for the item.
It accept 4 values(3 optional and 1 required):
1st → (optional) defines the start row 2nd→ (optional) defines the start column
3rd → (required) defines the end row 4th → (optional) defines the end column
or you can use a named area if grid-template-areas used in the grid container
grid-area: 1 / 1 / span 3 / 2; →  spans for 3 rows
grid-area: 1 / 3 / span 2 / span 2;  →  spans for 2 rows and 2 columns

c - grid-template
grid-template is a shorthand property for grid-columns, grid-rows and grid-areas
It simplifies the process of creating and configuring grids
It groups together related settings such as number of columns/rows, their sized etc
example 1 →  it specifies 2x2 grid container
1st line both cells are the header with auto size
2nd line sidebar and main
200px specifies the row size values
1fr 3fr specify the column size values