Áreas Nomeadas

Parte da seção CSS Mastery do Journey de HTML da Coddy — lição 33 de 43.

Em vez de posicionar itens usando números de linha, você pode dar nomes a partes da sua grade usando a propriedade grid-template-areas. Este método é ótimo para criar layouts limpos e legíveis — especialmente ao trabalhar com várias seções como cabeçalhos, barras laterais e rodapés. Confira o exemplo abaixo:

Definimos um contêiner com CSS Grid e usamos grid-template-areas para criar um layout nomeado:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

Cada linha de texto forma uma linha, e cada palavra na linha é uma parte da grade. Se você repetir uma palavra, essa área se estenderá por mais espaço.

Em seguida, você faz a correspondência dos seus elementos HTML com esses nomes assim:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Desafio

Fácil

Crie um layout de grade CSS para uma página da web básica com as seguintes áreas, como na imagem abaixo:

Defina as seguintes propriedades no seletor .container:

display para grid
grid-template-columns para 1fr 3fr
grid-template-rows para auto 1fr auto
grid-template-areas para:
"header header"
"profile main"
"footer footer"

Atribua cada elemento à sua respectiva área. Por exemplo, para o .header defina grid-area para header.

Folha de consulta

Use grid-template-areas para criar layouts de grade nomeados:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

Cada linha de texto cria uma linha, e cada palavra na linha é uma parte da grade. Repetir uma palavra estende essa área por mais espaço.

Atribua elementos a áreas da grade usando grid-area:

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

Experimente você mesmo

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      height: 100vh;
      gap: 10px;
      /* Set up your grid container here */
      
    }
    
    .header {
      /* Assign to header area */
      background-color: #f1c40f;
      padding: 20px;
    }
    
    .profile {
      /* Assign to profile area */
      background-color: #3498db;
      padding: 20px;
    }
    
    .main {
      /* Assign to main area */
      background-color: #2ecc71;
      padding: 20px;
    }
    
    .footer {
      /* Assign to footer area */
      background-color: #e74c3c;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">Header</div>
    <div class="profile">Profile</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
  </div>
</body>
</html>

Teste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.