Gerador CSS Grid Grátis: Design Grid Layout Visual Online
7 usos10px
Dicas CSS Grid
Colunas e linhas
Defina número de colunas e linhas. Unidades fr ou px.
Gap
Espaço entre células para layout limpo.
CSS pronto
grid-template-columns, rows e gap gerados.
Perguntas Frequentes
O que é CSS Grid?
Sistema de layout 2D com linhas e colunas.
Grid vs Flexbox?
Grid para 2D. Flexbox para 1D.
O que é fr?
Unidade flexível que distribui espaço proporcionalmente.
Posso salvar meus layouts de grade para uso posterior?
No momento, a ferramenta não possui um recurso integrado para salvar layouts diretamente na interface. Você precisará copiar o código CSS gerado e colá-lo em um documento ou em seu projeto. Muitos usuários copiam o código e o armazenam em uma pasta dedicada de 'snippets' em seu editor de código. Estamos avaliando o armazenamento persistente para futuras atualizações.
Posso criar grades aninhadas dentro dos itens da grade?
Sim, pode. Basta aplicar display: grid a qualquer item da grade, e ele se torna seu próprio contêiner de grade. O gerador lida com uma grade de cada vez, então você precisará copiar o CSS para cada nível aninhado separadamente. Para um layout de dois níveis, desenhe a grade externa primeiro, depois crie uma segunda grade para os itens internos. Isso mantém seu código modular e mais fácil de depurar.
Como Usar
- Defina colunas e linhas
- Ajuste gap
- Preview em tempo real
- Copie CSS