Gerador de grade CSS
Defina colunas, linhas e lacunas visualmente e, em seguida, copie o código do modelo CSS Grid para o seu layout.
CSS Grid Generator
LiveCSS output
display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px;
Key capabilities
- Defina colunas, linhas e lacunas visualmente e, em seguida, copie o código do modelo CSS Grid.
- Executa no seu navegador
- Grátis para usar
Como usar
- Defina contagens de colunas e linhas.
- Ajuste a lacuna e o dimensionamento da trilha.
- Copie o CSS da grade.
How this tool works
- Defina contagens de colunas e linhas.
- Ajuste a lacuna e o dimensionamento da trilha.
- Copie o CSS da grade.
Recommended settings
- Use as opções padrão primeiro e depois ajuste se necessário
Supported formats
Text / on-page input
File size and limits
- Visualizações multicamadas muito complexas podem parecer mais lentas em telefones mais antigos.
Privacy
Os geradores de cores e CSS são executados inteiramente no seu navegador. Pré-visualizações e conversões nunca carregam seus estilos.
Common use cases
- Use o CSS Grid Generator sempre que precisar: defina colunas, linhas e lacunas visualmente e, em seguida, copie o código do modelo CSS Grid.
Troubleshooting
A visualização parece diferente depois de colar
Verifique se há CSS concorrentes em sua página (redefinições, cores herdadas). Copie primeiro a regra gerada em uma folha de estilo isolada.
Perguntas frequentes
Isso carrega meu CSS?
Não. Geradores e conversores são executados em seu navegador com visualização ao vivo.
Eu preciso de uma conta?
Não. Abra a ferramenta, ajuste os controles e copie o CSS.
Ferramentas relacionadas
Flexbox Generator
Experiment with flex direction, wrap, justify, and align — see layouts update live.
Open toolBorder Radius Generator
Control each corner independently and preview rounded shapes with copy-ready CSS.
Open toolBox Shadow Generator
Design layered box-shadows with offset, blur, spread, and color — live preview included.
Open tool