Gerador de CSS Grid
CSS Grid Builder
Desenha uma grade visualmente com áreas nomeadas e gera o CSS de grid-template.
Pinta áreas nomeadas em um grid clicando em células, verifica-as contra a regra de retângulo da especificação e emite `grid-template-areas` — ou números de linha, se preferir. A verificação importa porque uma lista de áreas inválida é descartada em silêncio, sem erro em lugar nenhum.
Grade
Uma célula de tamanho aceita 1fr·240px·auto·minmax(200px, 1fr).
Clique numa célula para dar a ela o nome de área que está abaixo. Clique numa e depois em outra e o retângulo entre as duas é preenchido como uma área só. Clicar de novo numa célula com o mesmo nome esvazia a célula.
CSS
Prévia
Tem uma regra só para lembrar
Uma área com nome precisa ser um retângulo (CSS Grid Level 2 §7.3.1). Faça um L e a declaração grid-template-areas inteira é descartada sem erro nenhum, e é por isso que esta ferramenta avisa antes de escrever o CSS. Três ou mais faixas iguais seguidas são escritas com repeat().
Para um layout de uma dimensão só, o playground de Flexbox é mais simples.
Como usar
Comece de um layout
Cabeçalho-barra lateral-conteúdo-rodapé, uma fileira de cards, um dashboard, um artigo centralizado. Ou construa o seu a partir de um grid vazio.
Nomeie uma área e clique nas células
Digite o nome e depois clique. Clique em uma célula e depois em outra para preencher o retângulo entre elas; clique de novo em uma célula com o mesmo nome para limpá-la.
Defina os tamanhos das trilhas
As caixas ao longo do topo e da esquerda aceitam `1fr`, `240px`, `auto` ou `minmax(200px, 1fr)`. Três ou mais trilhas idênticas são escritas com `repeat()`.
Perguntas frequentes
Por que minha área em forma de L não funciona?
Porque uma área nomeada precisa ser um retângulo — CSS Grid Level 2 §7.3.1. Se não for, a declaração `grid-template-areas` inteira é inválida e o navegador a descarta sem erro nenhum. Esta ferramenta avisa antes de escrever o CSS, que é o único aviso que você vai receber.
Áreas nomeadas ou números de linha?
Áreas se leem melhor e sobrevivem à inserção de uma trilha. Números de linha são a única opção quando um item se estende por uma trilha que não existe em todos os breakpoints, ou quando o grid é gerado. O botão escreve qualquer um dos dois.
Como deixo uma célula vazia?
Não dê nome a ela. Ela é escrita como `.` no template, que é o token de célula nula da especificação — um ponto por célula vazia, e uma sequência deles ainda precisa deixar cada área nomeada retangular.
Por que `fr` não encolhe abaixo do conteúdo?
Porque `1fr` significa `minmax(auto, 1fr)`, e esse mínimo `auto` é o tamanho do conteúdo. Use `minmax(0, 1fr)` quando quiser uma trilha que realmente possa ficar mais estreita do que o que há nela — a correção clássica para um filho de grid que se recusa a encolher.
Pode receber de
Playground de Flexbox
Flexbox Playground
Alterna cada propriedade flex num exemplo ao vivo e mostra o CSS e o que cada propriedade mudou.
Calculadora de tamanho fluido
Fluid Size Calculator
Calcula uma expressão clamp() que escala um tamanho suavemente entre duas larguras de viewport.
Em seguida
Estas aceitam o que esta ferramenta produz, então o resultado pode ir direto.
Calculadora de tamanho fluido
Fluid Size Calculator
Calcula uma expressão clamp() que escala um tamanho suavemente entre duas larguras de viewport.
Formatador e minificador de CSS
CSS Beautifier & Minifier
Formata ou minifica CSS sem reordenar nada, preservando exatamente o fluxo de tokens.
Playground de Flexbox
Flexbox Playground
Alterna cada propriedade flex num exemplo ao vivo e mostra o CSS e o que cada propriedade mudou.
Conversor de formato de cor
Colour Format Converter
Converte uma cor entre HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e nomeia a cor conhecida mais próxima.
Seletor de cores
Colour Picker
Escolhe uma cor num campo OKLCH, com conta-gotas de tela ou a partir de uma imagem enviada, e a copia em qualquer notação.
Verificador de contraste
Contrast Checker
Pontua um par de cores de texto e fundo contra WCAG 2 e APCA e sugere a cor aprovada mais próxima.