Gerador de grid-template-areas

CSS Grid template-areas: layout visual em três linhas de CSS

O CSS Grid Layout virou Recomendação W3C em 2017 e tem suporte em todo navegador moderno, com mais de 96% de cobertura global. Entre todas as features, grid-template-areas é a mais expressiva — permite desenhar o layout da página inteira como ASCII art direto no CSS, com células nomeadas que mapeiam um-para-um nos componentes filhos do grid. Um header, uma sidebar, uma coluna main e um footer viram quatro strings em vez de um emaranhado de grid-column / grid-row espalhados pela stylesheet.

O boilerplate mínimo são três propriedades no pai e uma em cada filho:

.layout {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: 60px 1fr 40px;
  gap: 16px;
}
.layout > header { grid-area: header; }
.layout > aside  { grid-area: sidebar; }
.layout > main   { grid-area: main; }
.layout > footer { grid-area: footer; }

Regras de sintaxe

Cada string é uma linha; cada token separado por espaço é uma célula. Tokens idênticos adjacentes mesclam em um único retângulo que ocupa essas colunas (ou linhas, se repetidos verticalmente). O ponto . representa célula vazia — útil para layouts assimétricos: ". sidebar main ." deixa a primeira e a última coluna em branco. Áreas precisam formar retângulos; um formato em L gera erro de parse e a regra é descartada.

Dimensionando tracks: fr, minmax, repeat

A unidade fr representa uma fração do espaço livre — 1fr 2fr divide a linha em 1/3 e 2/3. minmax(200px, 1fr) define mínimo e máximo. repeat(3, 1fr) encurta três tracks iguais; repeat(auto-fill, minmax(200px, 1fr)) entrega um grid responsivo de cards sem uma única media query. A propriedade gap (renomeada de grid-gap) controla o espaçamento entre células.

Layouts responsivos e o grid implícito

A feature matadora é redefinir grid-template-areas dentro de uma @media: um layout desktop com sidebar colapsa no mobile empilhando cada área em uma única coluna. Itens posicionados fora do grid declarado disparam o grid implícito; grid-auto-rows e grid-auto-columns dimensionam esses tracks extras. Subgrid (Firefox 71+, Safari 16+, Chrome 117+) deixa um grid aninhado herdar os tracks do pai — essencial para alinhar conteúdo entre cards.

Perguntas frequentes

Grid substitui Flexbox? Não, são complementares. Grid é bidimensional (linhas e colunas ao mesmo tempo) e brilha em layout de página. Flexbox é unidimensional e é melhor para componentes como toolbars, grupos de botões e linhas de formulário.

Grid é performático? Sim. Os engines modernos (Blink, Gecko, WebKit) computam Grid no passo de layout com compositing acelerado por GPU para transforms; não há diferença prática frente a Flexbox ou floats em UIs típicas.

Posso usar Grid mobile-first? Pode. Defina o layout de coluna única como padrão e sobrescreva grid-template-areas dentro de @media (min-width: 768px) para tablet e desktop.

Qual a diferença entre linhas nomeadas e áreas nomeadas? Linhas nomeadas ([start] 200px [end]) anotam as bordas de colunas/linhas; áreas nomeadas anotam retângulos de células. Áreas são mais legíveis; linhas nomeadas são úteis quando você mistura posicionamento por área com números de linha explícitos.