Gerador de CSS Grid
Crie layouts em CSS Grid visualmente: defina linhas, colunas, gaps e justificações. Veja o preview e copie o CSS pronto. Tudo no navegador.
Preview
CSS Grid em 30 segundos
display: grid transforma o elemento em uma grade. grid-template-columns define a quantidade e largura das colunas (use 1fr para fração do espaço, auto para tamanho do conteúdo). gap espaça as células sem margens.
repeat(N, X) repete o padrão X N vezes. repeat(auto-fill, minmax(180px, 1fr)) cria quantas colunas couberem com largura mínima de 180px — perfeito para grids responsivos de cards. Tudo no navegador.
Monte layouts com CSS Grid visualmente
Pra montar layouts bidimensionais na web não existe nada tão capaz quanto o CSS Grid, mas a sintaxe acaba assustando quem está começando. Este gerador torna o processo visual: você define linhas, colunas, espaçamentos e alinhamentos clicando e ajustando, e o grid vai tomando forma diante de você.
Dá pra controlar a quantidade e o tamanho de linhas e colunas, os gaps entre elas e as propriedades de justificação e alinhamento, tudo sem escrever uma linha de CSS. No fim você copia o código gerado, prontinho pra colar no projeto e ainda servir de estudo sobre como cada propriedade se traduz.
Acontece tudo no navegador, sem instalação. Ajuda quem está aprendendo Grid e também quem só quer prototipar um layout depressa.
Ferramentas Relacionadas
Calculadora de Clamp CSS
Gere valores CSS clamp() para tipografia e espaçamentos fluidos. Informe os tamanhos mínimo/máximo e as larguras de viewport — o resultado é o clamp() pronto para colar no CSS.
Gerador de Loader CSS
Crie spinners e loaders em CSS puro com 8 estilos (anel, pontos, pulso, barras, etc.). Ajuste cor, tamanho e velocidade. Sem libs, sem GIFs. Tudo no navegador.
Gerador de Triângulo CSS
Crie triângulos puros com CSS usando o truque das bordas. Escolha direção (cima, baixo, esquerda, direita), tamanho e cor. Útil para tooltips, setas e ponteiros. Tudo no navegador.