A propriedade grid-template-areas permite que você crie um layout visual de grade usando rótulos nomeados. Você então atribui os rótulos a itens específicos da grade usando a propriedade grid-area. Então, em outras palavras, esses rótulos nomeados também são chamados de "grid area names". Aqui está a sintaxe básica da propriedade grid-template-areas:

grid-template-areas:
 'header header header'
 'left-sidebar main right-sidebar'
 'footer footer footer';

Aqui estão os pontos principais a serem destacados da sintaxe básica:

• Valores como header e main são os nomes das áreas da grade.
• Cada valor separado por espaço dentro de uma string corresponde a uma coluna.
• Cada string representa uma linha na grade.

Então, na sintaxe, temos um contêiner de grade 3 por 3. Após definir o template, você deve usar a propriedade grid-area e os rótulos nomeados (ou áreas) como valores para informar ao CSS que um elemento específico pertence àquela área da grade. A propriedade grid-area conecta o item da grade à região nomeada que você define em grid-template-areas. Uma maneira popular de demonstrar as capacidades da propriedade grid-template-areas é criando o clássico layout Holy Grail. Se você não sabe o que é, o layout Holy Grail é um padrão de design web com um cabeçalho, rodapé, duas barras laterais e uma área de conteúdo principal. Ele garante que o conteúdo principal tenha prioridade, enquanto as barras laterais e outras seções se ajustam responsivamente dentro do layout. Muitas soluções existem para implementar o layout holy grail, mas usar grid-template-areas e a propriedade grid-area é a maneira mais direta de criá-lo. Aqui está um exemplo para o layout holy grail:

<link rel="stylesheet" href="styles.css">
<div class="grid-container">
  <div class="header">
    <h2>Header</h2>
  </div>
  <div class="sidebar-left">
    <h2>Left Sidebar</h2>
  </div>
  <div class="main"><h2>Main Content</h2></div>
  <div class="sidebar-right">
    <h2>Right Sidebar</h2>
  </div>
  <div class="footer">
    <h2>Footer</h2>
  </div>
</div>

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header'
    'sidebar-left main sidebar-right'
    'footer footer footer';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.header {
  grid-area: header;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  text-align: center;
}

.sidebar-left {
  grid-area: sidebar-left;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  text-align: center;
}

.main {
  grid-area: main;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  text-align: center;
}

.sidebar-right {
  grid-area: sidebar-right;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  text-align: center;
}

.footer {
  grid-area: footer;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 20px;
  text-align: center;
}

Observe que as propriedades grid-template-areas e grid-area podem ser usadas independentemente uma da outra. A propriedade grid-template-areas é usada especificamente para definir um layout visual mapeando áreas nomeadas da grade dentro do contêiner da grade. Por outro lado, a propriedade grid-area é usada para posicionar itens individuais da grade, seja especificando suas posições de linha e coluna ou referenciando as áreas nomeadas definidas com a propriedade grid-template-areas.