01
Escolha o modelo
Grid organiza regiões em linhas e colunas; Flexbox distribui itens em uma direção. A troca de modo preserva os dois conjuntos de ajustes.
- O exemplo inicial já tem quatro áreas retangulares.
Ferramentas de layout CSS
gerador de layout CSS— Veja o resultado antes de copiar
Alterne Grid e Flexbox e confira o canvas, a prévia e o código lado a lado.
gerador de layout CSS
Escolha a célula inicial e depois o canto oposto.
.layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
gap: 16px;
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.area-header { grid-area: header; }
.area-sidebar { grid-area: sidebar; }
.area-main { grid-area: main; }
.area-footer { grid-area: footer; }
@media (max-width: 640px) {
.layout {
grid-template-columns: 1fr;
grid-template-rows: none;
grid-template-areas: "header" "sidebar" "main" "footer";
}
}As configurações ficam nesta aba do navegador, sem envio nem histórico salvo.
Código e prévia atualizados.
Um cabeçalho, uma barra lateral e o conteúdo principal exigem cuidado ao escrever grid-template-areas à mão. O gerador de layout CSS mostra primeiro as áreas nomeadas em uma grade.
Para uma navegação ou fileira de cartões, Flexbox costuma bastar. Este gerador de layout CSS mantém os ajustes de cada modo, então voltar para o Grid não exige recomeçar.
Por que usar este gerador de layout CSS
Canvas e código exportado são produzidos a partir das mesmas opções.
Grid e Flexbox no mesmo espaço
O gerador CSS Grid desenha áreas em duas dimensões; o gerador Flexbox distribui itens em um eixo. Ao alternar, cada modo conserva suas trilhas, alinhamento e espaçamento.
A prévia móvel corresponde ao CSS
O layout responsivo gera uma regra @media real para 640px. A prévia estreita renderiza o mesmo HTML/CSS exportado, não uma imagem reduzida da versão desktop.
Mantenha prévia e exportação alinhadas
02
Ajuste trilhas e áreas
Informe fr, px, auto ou minmax() nas trilhas. Selecione uma área e marque dois cantos opostos para preencher um retângulo.
- Sem geração automática, Ctrl/Cmd+Enter atualiza o resultado.
03
Confira no celular
Abra a prévia de 390px e observe a ordem da pilha. Após uma mudança, copiar e baixar ficam bloqueados até o código ser atualizado.
- Só o preset de empilhamento móvel adiciona a media query.
Da grade ao HTML utilizável
Áreas Grid nomeadas
O editor de grid-template-areas gera o mapa e as regras grid-area dos filhos HTML com nomes correspondentes.
Controles do Flexbox
Direção, quebra, alinhamento nos dois eixos, número de itens e espaçamento aparecem na prévia renderizada pelo navegador.
HTML e CSS responsivos
O preset de 640px produz uma regra móvel e o HTML correspondente, que pode ser copiado ou baixado como arquivo completo.
Limites das áreas e do código
- Cada área é um retângulo
- Nomes separados, sobrepostos ou em L tornam grid-template-areas inválido. O canvas rejeita esses desenhos e impede copiar o resultado anterior como se estivesse atualizado.
- Valores de trilha são validados
- 1fr, 200px, auto e minmax(120px, 1fr) são exemplos aceitos. Texto não suportado bloqueia a geração em vez de entrar no CSS.
- Apenas um ponto de quebra
- Até 640px os itens são empilhados. Os botões tablet e desktop mudam somente a largura da prévia; não geram regras extras, Tailwind, SCSS ou React.
- HTML é um esqueleto
- A saída contém áreas Grid ou itens Flex numerados. Não importa arquivos nem reconstrói uma página pronta com conteúdo completo.
Perguntas sobre o gerador de layout CSS
Quando devo usar Grid em vez de Flexbox?
Grid serve para controlar linhas e colunas de uma estrutura; Flexbox organiza itens ao longo de um eixo. O gerador de layout CSS mantém os dois modos na mesma página.
Como criar um layout responsivo com CSS Grid?
Ative o empilhamento móvel e confira a largura de 390px. O código inclui @media até 640px; ajuste esse limite ao conteúdo do seu projeto se necessário.
O que muda entre fr, px e auto nas colunas?
fr distribui o espaço restante, px define largura fixa e auto acompanha o conteúdo. Os campos são verificados antes da exportação.
Como alinhar itens no eixo principal do Flexbox?
No eixo principal, justify-content define a distribuição; no eixo transversal, align-items controla o alinhamento. A direção escolhida muda qual eixo é horizontal.
Posso copiar o HTML e o CSS gerados?
Sim. Copie CSS e HTML separadamente ou baixe um arquivo HTML com ambos. Mudanças ainda não geradas deixam a exportação indisponível.
Faltou algum caso de layout?
Comece com o gerador de layout CSS
Use o exemplo, verifique a prévia real do navegador e leve HTML e CSS correspondentes para o projeto.