Gerador de CSS Grid
Crie layouts CSS Grid visualmente. Configure colunas, linhas, gap e áreas nomeadas. Código pronto para copiar.
O que é Gerador de CSS Grid?
Monte um layout com CSS Grid visualmente e copie o código pronto, direto no navegador. O humberto.ai deixa você definir colunas, linhas, gap e áreas nomeadas (grid-template-areas) com preview em tempo real, gerando o CSS que você cola no seu projeto. Ideal para criar layouts responsivos sem decorar a sintaxe do Grid. Sem cadastro.
Como usar
- Defina o número e o tamanho das colunas e linhas (fr, px, auto).
- Ajuste o espaçamento (gap) entre as células.
- Opcionalmente nomeie áreas para usar grid-template-areas.
- Veja o preview em tempo real e copie o CSS gerado.
Perguntas frequentes
Qual a diferença entre CSS Grid e Flexbox?
Grid é bidimensional — controla linhas e colunas ao mesmo tempo, ideal para layouts de página. Flexbox é unidimensional — organiza itens em uma linha ou coluna, ideal para componentes e barras. Muitos layouts usam os dois juntos.
O que significa a unidade 'fr'?
fr é 'fração' do espaço disponível. '1fr 1fr 1fr' cria três colunas iguais; '2fr 1fr' faz a primeira coluna ocupar o dobro da segunda. É a forma mais flexível de distribuir espaço no Grid.
O que são grid-template-areas?
Permitem nomear regiões do grid (header, sidebar, main, footer) e posicionar os elementos por nome, em vez de por número de linha e coluna. Deixa o CSS mais legível em layouts complexos.
O layout gerado é responsivo?
O Grid se adapta ao container, mas para telas pequenas você normalmente ajusta as colunas via media query ou usa 'repeat(auto-fit, minmax(...))'. O código gerado é a base — refine a responsividade conforme o projeto.
Preciso instalar algo para usar o CSS?
Não. CSS Grid é nativo de todos os navegadores modernos. Cole o código gerado no seu arquivo CSS e funciona sem bibliotecas.