🔲 Dev

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

Colunas Linhas Gap colunas (px) Gap linhas (px) Template colunas Template linhas Justify items Align items

CSS

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.

Perguntas frequentes

Mexi no campo de template e o número de colunas mudou sozinho. É erro?

Não, os dois campos são espelhos um do outro. Digitar no campo Colunas reescreve o template como repeat(N, 1fr), e o campo Linhas vira repeat(N, 80px) — o que você tinha escrito à mão se perde. No sentido inverso o gerador lê o template, conta as faixas e atualiza os números. Se quiser larguras diferentes, como 200px 1fr 200px, escreva direto no campo de template e não encoste mais nos campos numéricos.

Por que o preset de cards mostra sempre 6 colunas no preview?

É um chute do preview, não do CSS. Com auto-fill ou auto-fit o número real de colunas só é decidido pelo navegador depois de medir a largura disponível, então o gerador desenha 6 células para você ter alguma coisa na tela. O código copiado está correto: repeat(auto-fill, minmax(180px, 1fr)) vai criar quantas colunas couberem no seu container real, e o mesmo grid pode mostrar 2 colunas no celular e 7 num monitor largo.

Quando o CSS sai com gap e quando sai com row-gap e column-gap?

Depende dos valores. Se o gap de linhas e o de colunas forem iguais (os dois começam em 12px), sai a forma curta gap: 12px. Se você deixar valores diferentes, saem duas declarações separadas. A mesma economia vale para justify-items e align-items: enquanto estiverem em stretch, que já é o comportamento padrão do Grid, o gerador simplesmente não escreve a linha, para o CSS não carregar declaração inútil.

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.

🎬

prefers-reduced-motion CSS

Gera snippet CSS @media (prefers-reduced-motion: reduce) para desativar animações.

⏳

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.

🪟

Gerador de Glassmorphism CSS

Crie efeitos de vidro fosco (glassmorphism) com backdrop-filter, transparência e bordas. Ajuste blur, saturação e opacidade. Veja o preview em tempo real e copie o CSS. Tudo no navegador.

⬜

Gerador de Border Radius CSS

Crie formas arredondadas customizadas com 8 controles independentes (4 cantos × 2 eixos). Veja o preview em tempo real e copie o CSS pronto. Tudo no navegador.