Uma fração do espaço livre restante. 'repeat(3, 1fr)' divide o container em três colunas iguais. Misture com tamanhos fixos: '200px 1fr' dá sidebar de 200px e main flexível.

auto-fit ou auto-fill?

Ambos criam quantas tracks couberem. auto-fit colapsa vazias; auto-fill mantém. Para grids responsivos de cards geralmente quer auto-fit.

Por que o alinhamento não é o esperado?

justify-items / align-items alinham o conteúdo de cada célula. Para alinhar o grid inteiro, use justify-content / align-content (ainda não nesta ferramenta).

Posso nomear linhas ou áreas?

Sim no CSS real, mas o playground foca nas propriedades visuais mais comuns. named lines / grid-template-areas são poderosas mas difíceis de demonstrar em pré-visualização genérica.

Playground de CSS Grid

Edite grid-template-columns e rows diretamente ou escolha presets comuns (3 cols, sidebar, holy grail, cards auto-fit). Ajuste gap, justify-items e align-items via chips; mude quantos itens aparecem. Pré-visualização reflete tudo ao vivo e o CSS sai pronto para colar. Companheiro do Playground Flexbox para a outra metade do layout CSS.

—

Templates

Clique em um preset para carregá-lo nos campos coluna / linha.

grid-template-columnsgrid-template-rows

gap (px)Itens

justify-items

align-items

Pré-visualização

CSS

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 12px;
justify-items: stretch;
align-items: stretch;

Como usar

Escolha um preset ou escreva seus próprios valores de grid-template.
Configure o gap e quantos itens mostrar.
Ajuste justify-items / align-items com as chips.
Copie o CSS para o projeto.

Perguntas frequentes

O que é fr?: Uma fração do espaço livre restante. 'repeat(3, 1fr)' divide o container em três colunas iguais. Misture com tamanhos fixos: '200px 1fr' dá sidebar de 200px e main flexível.
auto-fit ou auto-fill?: Ambos criam quantas tracks couberem. auto-fit colapsa vazias; auto-fill mantém. Para grids responsivos de cards geralmente quer auto-fit.
Por que o alinhamento não é o esperado?: justify-items / align-items alinham o conteúdo de cada célula. Para alinhar o grid inteiro, use justify-content / align-content (ainda não nesta ferramenta).
Posso nomear linhas ou áreas?: Sim no CSS real, mas o playground foca nas propriedades visuais mais comuns. named lines / grid-template-areas são poderosas mas difíceis de demonstrar em pré-visualização genérica.

Ferramentas relacionadas

Playground de CSS Flexbox

Escolha visualmente flex-direction, justify-content, align-items e gap — copie o CSS ou a classe Tailwind.

Desenvolvimento 0 0

Playground de Filtros CSS

Componha visualmente blur, brightness, contrast, hue, sepia, invert e mais — copie o filtro CSS ou valor arbitrário Tailwind.

Cor 0 0

Gerador de Animação CSS

Construa uma animação CSS visualmente — escolha preset, ajuste duração/easing/iteração, veja preview e copie os keyframes.

Desenvolvimento 0 0

Calculadora CSS clamp() (Tipografia Fluida)

Crie um `font-size: clamp(...)` fluido que escala entre duas larguras de viewport — copie em uma linha.

Cor 0 0

Construtor de CSS clip-path (polígono, círculo)

Construtor visual da propriedade CSS `clip-path` — escolha uma forma (círculo, elipse, inset ou polígono), ajuste números com sliders ou clique na pré-visualização para adicionar pontos do polígono, e copie uma declaração CSS pronta para colar. Inclui 10 presets de forma (triângulo, hexágono, estrela, seta, balão, mais, …).

Cor 0 0

Construtor de Expressões Cron

Monte uma expressão cron clicando — cada hora, dia, semana, mês ou totalmente custom — par do Cron Explainer.

Desenvolvimento 0 0