Ferramentas CSS/Gerador de CSS Grid
Gerador de CSS Grid
Projete layouts CSS Grid complexos com controles visuais interativos
Guia CSS Grid
Aprenda a criar layouts bidimensionais complexos
O que é CSS Grid?
CSS Grid é um sistema de layout bidimensional que lida com colunas e linhas. Fornece controle preciso sobre o posicionamento e dimensionamento de elementos, sendo ideal para layouts de página complexos, painéis e galerias de imagens.
Como usar esta ferramenta
- Defina colunas e linhas da grade usando as configurações de modelo
- Adicione itens da grade e posicione-os usando grid-column/row
- Ajuste espaçamento, alinhamento e distribuição de conteúdo
- Experimente layouts predefinidos ou crie seu próprio design personalizado
Dicas profissionais
- Use unidades fr para dimensionamento flexível que se adapta ao espaço disponível
- A função minmax() cria colunas responsivas sem media queries
- Linhas e áreas de grade nomeadas tornam layouts complexos mais legíveis
Suporte do navegador
CSS Grid é suportado em todos os navegadores modernos, incluindo Chrome, Firefox, Safari e Edge. Tem excelente suporte para uso em produção com mais de 95% de cobertura global.
Perguntas frequentes
O que e a unidade fr e como usa-la?
fr (fraction) e uma unidade flexivel que divide o espaco disponivel no container grid. '1fr 2fr' divide o espaco na proporcao 1:2. Diferente de px ou %, calcula e distribui o espaco automaticamente, sendo muito util para layouts responsivos.
Como usar grid-template-areas?
grid-template-areas permite definir o layout visualmente. Nomeie cada area do grid e represente a disposicao com strings. Exemplo: 'header header' 'sidebar main' 'footer footer'. Cria layouts intuitivos e faceis de manter.
Quando usar a funcao repeat()?
repeat() define trilhas repetidas de forma concisa. 'repeat(3, 1fr)' equivale a '1fr 1fr 1fr'. Usado com auto-fill ou auto-fit, cria grids responsivos que ajustam automaticamente o numero de colunas ao tamanho do container.
Como fazer um item ocupar varias celulas?
Use a palavra-chave span nas propriedades grid-column e grid-row. 'grid-column: span 2' ocupa 2 colunas, 'grid-row: 1 / 3' ocupa da linha 1 ate a 3 (2 linhas). Isso permite criar layouts irregulares facilmente.
Qual a diferenca entre auto-fill e auto-fit?
Ambos sao usados com repeat() para criar colunas automaticamente. auto-fill mantem trilhas vazias preenchendo o espaco, auto-fit colapsa trilhas vazias fazendo o conteudo expandir. Com poucos itens, auto-fit expande os itens para preencher o espaco.