Áreas nomeadas
Em vez de contar linhas e colunas numeradas, o Grid permite dar NOMES às regiões do layout, tornando o CSS muito mais legível.
Estudar esta lição interativa →Além de linhas e colunas numeradas, o Grid tem um recurso particularmente elegante: grid-template-areas, que permite desenhar o layout com nomes, quase como um mapa em ASCII, e depois dizer a cada elemento em qual área nomeada ele vive.
O grid-template-areas descreve o layout com nomes: cabecalho ocupa as duas colunas do topo, lado e principal dividem a linha de baixo. Cada elemento vai para a área com o mesmo nome no seu grid-area.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. O "desenho" em grid-template-areas descreve visualmente o layout: cabeçalho ocupando as duas colunas, menu e conteúdo lado a lado embaixo.
Um exemplo de produto real: o layout clássico de um painel administrativo (menu lateral fixo + conteúdo principal + cabeçalho no topo) é um caso de uso perfeito para grid-template-areas: o CSS fica praticamente autoexplicativo, qualquer pessoa lendo o código entende a estrutura da página só olhando o "desenho" das áreas, sem precisar visualizar mentalmente números de linha e coluna.
Cada linha dentro de grid-template-areas precisa ter o mesmo número de nomes (representando o mesmo número de colunas), e o nome usado em grid-area de cada filho precisa bater exatamente (mesma grafia) com um nome usado no "desenho". Um erro de digitação aqui faz aquele elemento simplesmente não aparecer na área esperada.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Dê a cada div o grid-area correspondente.