Layout santo graal com Grid

O layout do Santo Graal é um padrão clássico de design para a web: uma página com altura total, cabeçalho, rodapé e uma seção central de três colunas (barra lateral esquerda, conteúdo principal e barra lateral direita). Ele era notoriamente difícil de implementar com flutuação; a grade do CSS torna isso trivial.

Defina a disposição com áreas nomeadas do modelo e linhas: grid-template-areas mapeia a estrutura visual. Três colunas e três linhas (o cabeçalho ocupa todas as colunas, o rodapé ocupa todas as colunas e a parte central tem três colunas) representam toda a disposição em um diagrama ASCII legível.

Cada elemento filho referencia sua área pelo nome: header { grid-area: header }, main { grid-area: main }, nav { grid-area: sidebar }, aside { grid-area: aside }, footer { grid-area: footer }. A grade os posiciona automaticamente.

A linha central usa 1fr, que preenche toda a altura restante da área de visualização depois do cabeçalho e do rodapé com altura fixa. Isso garante que as barras laterais e o conteúdo principal sempre se estendam para preencher a área de visualização, sem necessidade de cálculos explícitos de altura.

Em dispositivos móveis, use uma consulta de mídia para redefinir grid-template-areas como uma pilha de coluna única: cabeçalho, barra lateral, conteúdo principal, barra lateral secundária e rodapé empilhados verticalmente. A ordem do DOM é mantida; somente o modelo visual da grade muda. As áreas da grade tornam a reestruturação responsiva legível.

Em tablets, remova a barra lateral direita e expanda o conteúdo principal: redefina para "header header" "sidebar main" "footer footer" com grid-template-columns: 240px 1fr. Defina aside { display: none } ou mova-a para baixo do conteúdo principal na definição das áreas.

Adicione espaçamento entre as trilhas da grade: gap: var(--spacing-4). Aplique o preenchimento interno em cada área, e não no contêiner da grade, para manter o espaçamento consistente. Normalmente, o cabeçalho e o rodapé recebem seu próprio preenchimento horizontal, alinhado à largura máxima da grade.

A área de conteúdo principal também pode ser uma grade: um artigo com duas colunas e uma barra lateral dentro da área principal. Grades aninhadas criam uma disposição de conteúdo dentro da estrutura de página sem hierarquias complexas de classes nem posicionamento profundamente aninhado.

Faça o cabeçalho permanecer fixo: header { position: sticky; top: 0; z-index: 10; }. Em uma disposição de grade, o posicionamento fixo de um filho da grade funciona como esperado: o cabeçalho permanece fixo enquanto o conteúdo principal, a barra lateral e a barra lateral secundária rolam abaixo dele.

As duas barras laterais podem permanecer fixas: nav, aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; }. Elas permanecem visíveis enquanto o conteúdo principal rola, criando uma disposição de três painéis na qual somente o centro rola.

Use a grade para disposições bidimensionais da estrutura da página, como o Santo Graal: a grade é excelente para posicionar itens simultaneamente em linhas e colunas nomeadas. Use Flexbox para disposições unidimensionais de componentes (itens de navegação em uma linha, conteúdo de cartões em uma coluna) dentro das áreas da grade.

O que torna grid-template-areas especialmente útil para disposições responsivas do Santo Graal?

A grade do CSS torna trivial o historicamente difícil layout do Santo Graal: grid-template-areas nomeia regiões, 1fr na linha central preenche a altura da área de visualização e as consultas de mídia redefinem o mapa de áreas para o recolhimento responsivo. Cabeçalhos e barras laterais fixos podem ser adicionados sem complexidade extra.