Gerador de CSS Grid
Configure colunas, linhas e espaços com controles deslizantes e veja o resultado ao vivo. Copie o CSS e o HTML prontos para colar no seu projeto.
Processado 100% no seu navegador
CSS
HTML
Ctrl + Enter executarCtrl + C copiar resultado
Como usar
- 1Ajuste o número de colunas e linhas.
- 2Defina o espaço entre colunas e linhas.
- 3Escolha a largura das colunas: iguais, fixas, automática ou adaptável.
- 4Copie o CSS e o HTML gerados.
Casos de uso
- Criar uma galeria de cards que se adapta à largura da tela.
- Montar o esqueleto de um dashboard.
- Aprender como funcionam grid-template-columns e gap.
- Prototipar layouts rapidamente antes de programar.
Perguntas frequentes
O que é CSS Grid?
Um sistema de layout CSS bidimensional que organiza elementos em linhas e colunas.
O que faz auto-fit com minmax?
Cria quantas colunas couberem com uma largura mínima e as estica para preencher o espaço: ideal para layouts adaptáveis sem media queries.
O que significa 1fr?
Uma fração do espaço disponível. Três colunas de 1fr dividem a largura igualmente.
Funciona em todos os navegadores?
Sim, o CSS Grid é compatível com todos os navegadores modernos.