Anúncios incomodam? Ir Sem anúncios Hoje 

Gerador de CSS Grid (Visual)

DesenvolvedorTexto

ANUNCIADO Remover?

ENTRADA

Processo Automático

SAÍDA

Lado cliente

ANUNCIADO Remover?

Guia

Gerador de CSS Grid

Construa layouts de CSS Grid visualmente. Clique nas células para definir áreas nomeadas, ajustar tamanhos de coluna e linha, e obter código CSS pronto para produção instantaneamente. Sem memorizar a sintaxe do grid — apenas clique e construa.

Como usar

Defina o número de colunas e linhas, e então clique nas células do grid para atribuir áreas nomeadas (como header, sidebar, main, footer). Células com o mesmo nome são destacadas na mesma cor. A saída CSS é atualizada em tempo real conforme você projeta seu layout. Use os botões predefinidos para layouts comuns como Holy Grail ou Dashboard.

Características

Editor de Grid Interativo – Clique nas células para atribuir áreas nomeadas com visualização colorida automática
Saída CSS em Tempo Real – Código pronto para produção com grid-template-areas, grid-template-columns, grid-template-rows e gap
Visualização ao Vivo – Veja seu layout renderizado com áreas nomeadas coloridas em tempo real
Layouts Predefinidos – Layouts Holy Grail, Dashboard, Blog e Portfolio com um clique
Dimensionamento Flexível – Defina tamanhos de coluna e linha usando unidades fr, px ou porcentagem
CSS do Elemento Filho – Gera regras de grid-area para cada área nomeada automaticamente
Cliente 100% – Toda a geração de layout acontece no seu navegador

ANUNCIADO Remover?

 Perguntas frequentes

O que é CSS Grid e como ele se diferencia do Flexbox?

CSS Grid é um sistema de layout bidimensional que lida com colunas e linhas simultaneamente. Flexbox é unidimensional, trabalhando ao longo de um eixo de linha ou coluna. Grid é ideal para layouts em nível de página (cabeçalhos, barras laterais, áreas de conteúdo), enquanto Flexbox se destaca no alinhamento em nível de componente (itens de navegação, conteúdos de cartões). A maioria dos layouts modernos usa ambos juntos.
O que é a unidade fr no CSS Grid?

A unidade fr (fração) representa uma fração do espaço disponível no contêiner do grid. 1fr 2fr significa que a segunda coluna recebe o dobro do espaço da primeira. É semelhante ao flex-grow no Flexbox, mas projetado especificamente para trilhas de grid. As unidades fr distribuem automaticamente o espaço restante após a alocação de trilhas de tamanho fixo (px, em).
O que é grid-template-areas e por que usar áreas nomeadas?

grid-template-areas permite que você defina seu layout usando strings nomeadas que representam visualmente a estrutura do grid no seu CSS. Em vez de posicionar itens por números de linha (grid-column: 1 / 3), você os atribui por nome (grid-area: header). O CSS resultante se parece com uma versão em arte ASCII do seu layout, tornando-o autoexplicativo e mais fácil de manter.
O que é o layout Holy Grail em web design?

O layout Holy Grail é uma estrutura clássica de página da web com um cabeçalho que se estende por toda a largura, um corpo de três colunas (barra lateral esquerda, conteúdo principal, barra lateral direita) e um rodapé de largura total. Historicamente, era difícil de alcançar com floats CSS e foi chamado de Holy Grail porque uma implementação limpa era muito esquiva. O CSS Grid o torna trivial.