Developer Tools
Design Tools
Web UtilitiesCSS Grid Playground
Crie layouts CSS Grid visualmente com pré-visualização em tempo real, suporte a áreas de modelo e saída imediata de código CSS. Configure colunas, linhas, espaçamentos e posicionamento de itens interativamente.
Presets
Propriedades do Contêiner
Propriedades do Item
Pré-visualização ao Vivo
CSS do Contêiner
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 80px);
gap: 8px;
}CSS dos Itens
.grid-item-1 {
}
.grid-item-2 {
}
.grid-item-3 {
}
.grid-item-4 {
}
.grid-item-5 {
}Ferramentas Relacionadas
Sobre o CSS Grid Playground
Como Funciona
- Configure as propriedades do contêiner: grid-template-columns, grid-template-rows, gap, justify-items, align-items, justify-content e align-content
- Adicione até 8 itens de grade e posicione cada um com grid-column-start/end e grid-row-start/end
- Use notação span (ex: span 2) ou números de linha explícitos nos campos de modelo
- Pré-visualize o layout em tempo real — clique em qualquer item na pré-visualização para selecioná-lo no editor
- Aplique presets para layouts comuns como Holy Grail, Dashboard ou Card Grid e depois personalize
- Copie o CSS gerado para contêiner e itens diretamente no seu projeto
Casos de Uso Comuns
- Aprender propriedades CSS Grid interativamente com feedback visual instantâneo
- Prototipar layouts de página: cabeçalhos, barras laterais, dashboards, grades de cartões
- Depurar problemas de posicionamento de grade ajustando números de linha visualmente
- Gerar CSS de grade básico para padrões de layout comuns
- Ensinar CSS Grid para estudantes e colegas
Perguntas Frequentes
O que é o CSS Grid Playground?
O CSS Grid Playground é uma ferramenta interativa para navegador que permite configurar visualmente todas as propriedades de contêiner e itens do CSS Grid. As alterações aparecem instantaneamente na pré-visualização ao vivo, e o código CSS pronto para uso é gerado automaticamente para você copiar em seu projeto.
Quais propriedades do contêiner posso configurar?
Você pode configurar grid-template-columns, grid-template-rows, gap (ou column-gap e row-gap separados), justify-items, align-items, justify-content e align-content. Todos os valores suportam qualquer sintaxe CSS válida, incluindo unidades fr, repeat(), minmax() e auto.
Como posiciono um item em linhas específicas?
Selecione o item usando sua guia numerada no painel Propriedades do Item, depois defina grid-column-start, grid-column-end, grid-row-start e grid-row-end. Insira um número para uma linha de grade explícita ou deixe como 'auto' para posicionamento automático.
O que são os presets e como usá-los?
Presets são configurações de grade pré-construídas para layouts comuns: 'Holy Grail' cria um layout clássico cabeçalho/nav/principal/lateral/rodapé, 'Sidebar + Main' constrói um layout de duas colunas com barra lateral, '3-Col Masonry' demonstra itens com extensão, 'Dashboard' mostra um painel de métricas de quatro colunas, 'Blog Layout' configura um artigo típico com barra lateral, e 'Card Grid' cria um layout de cartões de três colunas igual.
Quais valores grid-template-columns aceita?
grid-template-columns aceita qualquer lista de faixas CSS válida: comprimentos fixos como '200px 1fr', a função repeat() como 'repeat(3, 1fr)', minmax() como 'repeat(3, minmax(100px, 1fr))', auto-fill ou auto-fit, ou linhas nomeadas como '[inicio] 1fr [fim]'.
Qual a diferença entre unidades fr e pixels?
A unidade fr (fração) representa uma fração do espaço disponível no contêiner de grade. '1fr 1fr 1fr' divide o espaço igualmente em três colunas. '2fr 1fr' dá à primeira coluna o dobro do espaço. Os valores em pixels são fixos independentemente do tamanho do contêiner.
O que justify-items faz em comparação com justify-content?
justify-items controla como os itens são alinhados dentro de suas células de grade ao longo do eixo inline. justify-content controla como toda a grade é alinhada dentro do contêiner quando há espaço extra. Da mesma forma, align-items alinha itens dentro de suas células no eixo de bloco, enquanto align-content alinha toda a grade verticalmente.
O que são justify-self e align-self para itens de grade?
justify-self substitui justify-items para um único item de grade, controlando seu alinhamento inline dentro de sua célula. align-self substitui align-items para um único item, controlando seu alinhamento de bloco. Ambos aceitam: auto, start, end, center e stretch.
Como fazer um item abranger várias colunas ou linhas?
Defina grid-column-start e grid-column-end (ou grid-row-start e grid-row-end) para criar uma extensão. Por exemplo, para abranger da coluna 1 à coluna 3, defina start=1 e end=3. Como alternativa, deixe start como 'auto' e defina end como 'span 2' para abranger duas faixas.
Quantos itens de grade posso adicionar?
Você pode adicionar até 8 itens de grade. Clique no botão '+ Adicionar Item' para adicionar mais. Cada item tem código de cores para que você possa identificá-lo no painel de configurações e na pré-visualização ao vivo.
Posso usar tamanhos de gap personalizados para colunas e linhas?
Sim. Por padrão, um único valor de gap se aplica tanto aos canais de coluna quanto de linha. Marque a opção 'Usar gaps personalizados de coluna/linha' para definir column-gap e row-gap independentemente usando controles deslizantes separados.
Como copio o CSS gerado?
Há dois botões de cópia: um para o bloco CSS do contêiner (.grid-container) e outro para todo o CSS incluindo as regras de itens. Clique em qualquer botão 'Copiar CSS' para copiar o código para a área de transferência.