ZenovayTools

Gerador de CSS Grid

Construa layouts CSS Grid com um editor visual. Defina colunas, linhas, espaçamentos e estenda células nas áreas.

Preview (click cells to span)
12px
CSS
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 12px;
}

Como Usar Gerador de CSS Grid

  1. 1Defina o número de colunas e linhas para seu layout de grade.
  2. 2Ajuste as larguras das colunas e alturas das linhas usando os controles.
  3. 3Clique e arraste para estender células por várias colunas ou linhas.
  4. 4Defina o espaçamento entre as células da grade.
  5. 5Copie o código CSS Grid gerado.
ZenovayAnalytics

Saiba o que seus visitantes realmente fazem.

  • Acompanhamento de visitantes em tempo real
  • Privacidade em primeiro lugar, sem banner de cookies
  • Configurado em dois minutos
Conheça o Zenovay

Ferramentas Relacionadas

Gerador de Gradientes CSS
Crie belos gradientes CSS com um editor visual. Gradientes lineares, radiais e cônicos.
Gerador de CSS Box Shadow
Projete sombras CSS box-shadow com controles visuais. Ajuste o deslocamento, desfoque, espalhamento e cor.
Gerador de CSS Border Radius
Crie valores personalizados de border radius com controles visuais. Vincule ou desvinque os cantos para ajuste rápido.
Área de Testes CSS Flexbox
Aprenda e gere layouts CSS Flexbox visualmente. Ajuste direção, alinhamento, quebra de linha e espaçamento em tempo real.

Perguntas Frequentes

O que é CSS Grid?▾
CSS Grid Layout é um sistema de layout bidimensional para a web. Permite distribuir itens em linhas e colunas, facilitando o design de layouts complexos sem floats ou posicionamento.
Como funcionam grid-template-columns e grid-template-rows?▾
grid-template-columns define o número e a largura das colunas, enquanto grid-template-rows define o número e a altura das linhas. Use unidades fr para proporções flexíveis, px para tamanhos fixos ou auto para dimensionamento baseado no conteúdo.
O que é a unidade fr?▾
A unidade fr (fração) representa uma fração do espaço disponível no contêiner do grid. Por exemplo, 1fr 2fr cria duas colunas onde a segunda tem o dobro da largura da primeira.
Como faço um item ocupar múltiplas células?▾
Clique em uma célula do grid para iniciar um span, depois clique em uma célula adjacente para estendê-lo. A ferramenta gera regras de grid-column e grid-row span para o item selecionado.
Posso usar essa ferramenta no meu celular?▾
Sim, o gerador de CSS Grid funciona em qualquer navegador mobile moderno. Configure seu layout de grid visualmente e copie o CSS em qualquer dispositivo.
O CSS gerado inclui marcação HTML?▾
Sim. A ferramenta gera tanto os estilos CSS do grid quanto uma estrutura HTML correspondente, para que você possa copiar um layout de grid funcional completo diretamente no seu projeto.
Posso personalizar o espaçamento entre as células do grid?▾
Sim. Ajuste os valores de gap de linha e coluna para controlar o espaçamento entre os itens do grid. A ferramenta usa a propriedade CSS gap padrão, suportada em todos os navegadores modernos.