Gerador de grade CSS
Opções de grade
Modelo
Espaçamento
Alinhamento
Estado
Inativo
Visualização ao vivo
1
2
3
4
5
6
7
8
Sobre este gerador de grade CSS
Esta ferramenta ajuda você a criar layouts de grade CSS sem escrever todas as propriedades manualmente. Você pode alterar colunas, linhas, lacunas e alinhamento enquanto observa a atualização da visualização instantaneamente.
É útil para grades de cartões, galerias, seções de painel, layouts de barra lateral e experimentos rápidos de layout antes de mover o CSS para seu projeto.
Como usar
- Escolha uma predefinição ou digite seus próprios valores de grid-template-columns e grid-template-rows.
- Ajuste a lacuna, a lacuna da coluna, a lacuna da linha e as configurações de alinhamento.
- Verifique a visualização ao vivo para ver como a grade se comporta.
- Copie o CSS gerado ou a regra .grid completa.
Dicas
- Use repeat(3, 1fr) para colunas iguais.
- Use minmax(0, 1fr) quando os itens da grade puderem conter conteúdo longo.
- Use faixas fixas como 220px 1fr para layouts estilo barra lateral.
- Use justificar-conteúdo e alinhar-conteúdo quando a grade em si for menor que seu contêiner.
Ferramentas relacionadas
Você também pode achar essas ferramentas úteis.
Gerador de Flexbox CSS
Crie layouts Flexbox com preview em tempo real, controles de alinhamento, quebra de linha, direção, gap e CSS pronto para copiar.
Utilitários Diversos
›
Gerador de padrão de fundo CSS
Crie padrões de fundo CSS com pontos, grades, listras, linhas diagonais e tabuleiros de xadrez.
Utilitários Diversos
›
Gerador de bordas CSS
Crie estilos de borda CSS com largura, estilo, cor e raio da borda.
Utilitários Diversos
›
Gerador de gradiente CSS
Gere, analise e visualize gradientes lineares e radiais CSS online. Gerador de gradiente gratuito para desenvolvedores e designers.
Utilitários Diversos
›
Perguntas frequentes sobre o gerador de grade CSS
O que as colunas do modelo de grade fazem?
Ele define as colunas da grade, como repetir(3, 1fr), 220px 1fr ou repetir(4, minmax(0, 1fr)).
Qual é a diferença entre lacuna e lacuna de coluna?
gap define o espaçamento entre linhas e colunas. column-gap altera apenas o espaçamento horizontal entre colunas.
Posso colar CSS de grade existente?
Sim. Cole regras de grade comuns e use o Parse para carregá-las nos controles.
Isso é apenas para grades simples?
Funciona melhor para padrões de layout comuns, mas você também pode digitar valores de trilha de grade personalizados manualmente.