Grid Template Areas
You can refer a particular Grid Area using a grid name. Using grid-area, you can set the names of grid items.
Suppose, you set the name of the grid-area for item2 as “gridArea1“
Now, you can use this grid name in your main container using grid-template-areas property.
So, if you want to set a particular grid item as below –
So, grid-area will set a Grid name for a grid item & if you want to set a fixed number of columns that must be used by that particular grid item then you can use grid-template-areas property.
The most important feature of grid-area is that you can place your grid items at any location so, it is not mandatory that grid item 1 will be at location 1 or grid item 2 will be location 2. In fact, you can have grid item 1 at location 2 & grid item 2 at location 1 as required by your project.
Example of grid Area with Template Areas
Now, if you want a particular grid item, say item 3 to spread(span) or stretch to 2 columns out of 4 columns, then you can use like –
The grid-template-areas can use dot(.) to refer to grid items which have no name.
Example of grid template areas - Type 1
Each Row is set inside apostrophe i.e. ‘ ‘ and the number of columns for each row can be set by passing the grid name separated by a space. The multiple Rows will be separated by a space as below –
This means that item 3 uses a grid name which is gridArea3 & it spans across 2 rows. In Row 1, it spans 2 columns and in row 2, it spans 2 columns.
The dots(.) shows items which have no name.
Example of grid template areas - Type 2
Example of grid template areas - Type 3
Grid Template is the shorthand of Grid template Columns, Grid Template Rows & Grid Template Area.
Syntax of grid Template: