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“

.item2 {
  grid-area: 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 –

.main-container {
  display:grid;
  grid-template-areas: 'gridArea1 gridArea1 gridArea1';
}

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.

Note/Info:

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

.grid-item2-name {
  grid-area: gridArea1;
}

.main-container-template-areas {
  display:grid;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: 'gridArea1 gridArea1 gridArea1';
}

.inner-divs3 {
  padding: 2px;
  background:orange;
  border:2px solid yellow;
  text-align:center;
}

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 –

.grid-item3-name {
  grid-area: gridArea3;
}

.main-container-template-areas {
  display:grid;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: 'gridArea3 gridArea3 . .';
}

Note/Info:
The grid-template-areas can use dot(.) to refer to grid items which have no name.

Example of grid template areas - Type 1

.grid-item2-name {
  grid-area: gridArea1;
}

.main-container-template-areas1 {
  display:grid;
  grid-template-columns: auto auto auto;
  grid-template-areas: 'gridArea1 gridArea1';
}

.inner-divs3 {
  padding: 2px;
  background:blue;
  color:white;
  border:2px solid yellow;
  text-align:center;
}

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 –

.grid-item3-name {
  grid-area: gridArea3;
}

.main-container-template-areas {
  display:grid;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: 'gridArea3 gridArea3 . .' 'gridArea3 gridArea3 . .';
}

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

.grid-item2-name {
  grid-area: gridArea1;
}

.main-container-template-areas2 {
  display:grid;
  grid-template-columns: auto auto auto;
  grid-template-areas: 'gridArea1 gridArea1 .' 'gridArea1 gridArea1 .' 'gridArea1 gridArea1 .';
}

.inner-divs4 {
  padding: 2px;
  background:aqua;
  border:2px solid yellow;
  text-align:center;
}

Follow @tutorial_brain

Example of grid template areas - Type 3

.logo {
  grid-area: lArea;
}

.header {
  grid-area: hArea;
}

.left-sidebar {
  grid-area: lSbArea;
}

.content-area {
  grid-area: cArea;
}

.right-sidebar {
  grid-area: rSbArea;
}

.footer {
  grid-area: fArea;
}

.main-container {
  display:grid;
  grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-rows: auto auto auto auto auto;  
  grid-template-areas: 
    'lArea hArea hArea hArea hArea hArea hArea hArea hArea hArea hArea hArea' 
	'lSbArea lSbArea cArea cArea cArea cArea cArea cArea cArea cArea rSbArea rSbArea'  	
	'fArea fArea fArea fArea fArea fArea fArea fArea fArea fArea fArea fArea';
}

.main-container > div {
  padding: 2px;
  background:pink;
  border:1px solid green;
  text-align:center;
}

Grid Template

Grid Template is the shorthand of Grid template Columns, Grid Template Rows & Grid Template Area.

Syntax of grid Template:
a)grid-template:grid-template-rows/grid-template-columns;
b)grid-template:grid-template-areas;
c)grid-template:none;

Example of Grid Template

.main-container-template-areas3 {
  display:grid;
  grid-template: auto 50px / 100px 150px 200px;
}

.inner-divs5 {
  padding: 2px;
  background:yellow;
  border:2px solid orange;
  text-align:center;
}