Áreas Nomeadas

Parte da seção Domínio do CSS 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 às partes da sua grade usando a propriedade grid-template-areas. Esse método é ótimo para criar layouts limpos e fáceis de ler, 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.

Então, você associa seus elementos HTML a esses nomes desta forma:

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

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 como grid
grid-template-columns como 1fr 3fr
grid-template-rows como auto 1fr auto
Defina grid-template-areas como:
"header header"
"profile main"
"footer footer"

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

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>