Grid Areas In CSS are provided by CSS Grids to design layouts, by giving names to the layouts.

Before going further into Grid template Areas see the below layout, which is achieved with Grid template areas property.

See the above layout, this beautiful layout can be designed very easily and conveniently with the help of grid areas.

How to use Grid-template-areas?

The above layouts can be designed very easily using grid-template-areas.

First, we will assign names to various portions of our layout, say we want to call the top section a header, and for the middle section, we want to divide it into four parts. Let us say the names of these four parts are left-section, mid-section, and end-section.

For the last row, we want to elongate the second-row columns to the last row also. We are trying to build the above layout, so let us name the blue section in the last row as the last section.

Let us build the above layout step-by-step using codepen.

Step 1: Let us define the ids and classes we will use to define our CSS and the basic HTML structure.

Above we have defined the basic HTML structure and the basic CSS classes, now we will add our css below, and will see how to use grid-template-areas.

let us define the names which we are going to use using grid-template-areas, this can be done using grid-area : <area name>; using thsi property we will define the names of the various grid-areas ,which we are using,above we are using names like left-section,mid-section,end-section,left-section,last-section.**

Notice the below pen for changes made in the css.

Let us add background colors to all of our sections and borders so as to distinguish them from each other.

In the final step let us arrange the layout as we have designed above. We will use the grid-template-areas property to design the layout above.

For arranging the layout we will use the grid-template-areas property.

We will first address the first row, so the number one thing we have to take care of is that we first have to decide how many columns we want to design our layout into,i.e. how many columns each row should contain. Once you decide you have to stick with it only,as each row will have to contain the same number of columns.

In the above case we are dividing our row into four columns for convenience.

.container{
  display : grid;
  grid-template-areas : "header header header header"
    "left-section mid-section mid-section end-section"
    "left-section last-section last-section last-section";
}

This is the code that we had added, in the first row,we want our header to take all our columns,so the element which is defined with grid-area as header takes all of the four columns.In the second row we are giving one column to left-section two columns to mid-section and the last column to end-section.In the last row we are giving one column to the left-section and the remaining three columns to last section

Ways of defining grid-template areas.There can be some difference in the way in which you define grid-template-areas.See below,one way is to just use single-letters.

grid-template-areas:
"h h h h"
"l c c r"
"l f f f";

If you want to leave some space in a row as blank,or you do not want to place any item there,you can use the below method.

#grid {display: grid;
grid-template-areas:
"header header header header"
"left ... ... right"
"footer footer footer footer";}

The above code will result in a layout like this......

So this is a basic introduction for css grid-areas,for concise and precise explanation of frontend topics do follow me share the articel,comment your views.

Thankyou very much for reading