coding180 icon
CSS Grid: grid-template-areas attribute

CSS Grid: grid-template-areas attribute

Home > Tutorials > CSS > CSS Grid Layout

Grid layouts allow specifying "areas", which consist of single or multiple cells. grid-template-areas attributes are used to define regions.

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';

The above code has 9 cells, and then names a to i as the nine areas that correspond to the nine cells.

The way to merge multiple cells into one area is as follows.

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

The above code creates 9 cells into abthree areas.

Below is an example layout.

grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";

In the above code, the top is the header area header, the bottom is the footer area footer, and the middle part is the mainsum sidebar.

If some areas do not need to be exploited, they are represented by "dots" (.).

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

In the above code, the middle column is a dot, indicating that the cell is not used, or the cell does not belong to any area.


Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel