AZ Tools

Playground de CSS Grid

Desenvolvimento

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.

justify-items
align-items
Pré-visualização
1
2
3
4
5
6
CSS
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 12px;
justify-items: stretch;
align-items: stretch;

Como usar

  1. Escolha um preset ou escreva seus próprios valores de grid-template.
  2. Configure o gap e quantos itens mostrar.
  3. Ajuste justify-items / align-items com as chips.
  4. 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

Decodificador JWT

Decodifique um JSON Web Token para inspecionar cabeçalho, claims e expiração.

Desenvolvimento00

Gerador de UUID

Gere UUIDs v4 aleatórios em lote, com cópia.

Desenvolvimento00

Gerador de Hash (SHA)

Gere hashes SHA-1, SHA-256, SHA-384 e SHA-512 a partir de texto.

Desenvolvimento00

Codificador / Decodificador de URL

Codifique texto para URLs em porcentagem, ou decodifique URLs em texto.

Desenvolvimento00

Codificador / Decodificador Base64

Codifique texto em Base64 ou decodifique Base64 de volta em texto.

Desenvolvimento00

Formatador e Validador de JSON

Formate, embeleze, minifique e valide JSON no seu navegador.

Desenvolvimento00