grid-template-areas

Allows you to set a grid template for the placement of elements inside the grid container. Names of areas are defined using the grid-area. The current property grid-template-areas simply indicates where these grid areas should be located.

        
          
          .container {  display: grid;  grid-template-columns: 1fr 200px 1fr;  grid-template-rows: repeat(4, 150px);  grid-template-areas:    "header header header"    "content content 👾"    "content content ."    "footer footer footer";}
          .container {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  grid-template-rows: repeat(4, 150px);
  grid-template-areas:
    "header header header"
    "content content 👾"
    "content content ."
    "footer footer footer";
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

• none (default value) — no name is assigned to the grid area.
• . — means an empty cell.
• name of the area — the actual name of the area, which can be any word or even an emoji! 🤯

Note that each of the cells needs to be named. For example, if the header or footer of our site occupies all three existing columns, then the names of these areas need to be written three times. It is most convenient to label the areas in the form of a table. This method of notation is somewhat similar to tables in Markdown:

        
          
          .container {  display: grid;  grid-template-columns: repeat(3, 500px);  grid-template-rows: repeat(4, 1fr);  grid-template-areas:    "header header header"    "content content 👾"    "content content ."    "footer footer footer";}.item1 {  grid-area: header;}.item2 {  grid-area: content;}.item3 {  grid-area: 👾;}.item4 {  grid-area: footer;}
          .container {
  display: grid;
  grid-template-columns: repeat(3, 500px);
  grid-template-rows: repeat(4, 1fr);
  grid-template-areas:
    "header header header"
    "content content 👾"
    "content content ."
    "footer footer footer";
}

.item1 {
  grid-area: header;
}

.item2 {
  grid-area: content;
}

.item3 {
  grid-area: 👾;
}

.item4 {
  grid-area: footer;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Note that commas or other symbols are not placed between the lines; names are separated by spaces.

The layout will look like this:

💡 Names of areas should be separated by spaces. This is important, especially when you want to place two empty cells next to each other. Separate the dots with spaces, otherwise the browser will think this is one empty cell.