Playground de CSS Grid

O CSS Grid transforma um elemento em um layout bidimensional. Você define display: grid no container, declara as trilhas de colunas e linhas com grid-template-columns e grid-template-rows, e o navegador posiciona cada filho nas células resultantes. Por exemplo, grid-template-columns: repeat(3, 1fr) cria três colunas iguais, e os filhos fluem da esquerda para a direita, de cima para baixo. Diferente dos antigos layouts com float ou flexbox, o grid organiza linhas e colunas ao mesmo tempo, então você controla os dois eixos a partir de uma única propriedade no container.

Adicione display: grid a um container e então descreva as trilhas. O mínimo é uma linha: display: grid; grid-template-columns: 1fr 1fr; — que cria duas colunas iguais. A partir daí você adiciona grid-template-rows para linhas explícitas, gap para espaçamento, e regras por item como grid-column: span 2 para fazer um filho se estender por células. A abreviação grid pode combinar linhas, colunas e áreas em uma só declaração, mas a maioria dos desenvolvedores define grid-template-columns, gap e alinhamento separadamente porque fica mais legível. Este gerador escreve essas regras pra você.

Eles definem o tamanho de cada trilha de coluna e linha. grid-template-columns: 200px 1fr 1fr cria uma primeira coluna fixa de 200px e duas colunas flexíveis que dividem o restante. grid-template-rows: auto 1fr define uma primeira linha com tamanho pelo conteúdo e uma segunda linha que preenche a altura restante. Cada valor na lista é uma trilha, e o número de valores define quantas colunas ou linhas explícitas o grid possui. Este gerador constrói as duas listas enquanto você adiciona e edita trilhas, atualizando a pré-visualização em tempo real.

fr é a unidade de 'fração' — ela divide o espaço restante, então repeat(3, 1fr) cria três colunas de largura igual. repeat(n, valor) é uma abreviação que repete um padrão de trilha n vezes, então repeat(4, 1fr) é o mesmo que 1fr 1fr 1fr 1fr. minmax(min, max) define uma trilha que nunca encolhe abaixo de min nem cresce além de max; minmax(150px, 1fr) mantém uma coluna com pelo menos 150px de largura enquanto permite que ela se expanda. Combine os dois — repeat(auto-fit, minmax(150px, 1fr)) — para um grid que adiciona e remove colunas sozinho conforme a largura do container muda.

Use repeat() com auto-fit (ou auto-fill) e minmax() para o grid se reorganizar automaticamente: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). Cada coluna fica com pelo menos 200px de largura e o navegador encaixa o máximo que o container permite, caindo para menos colunas em telas estreitas e adicionando mais em telas largas. Mude este gerador para o modo Responsivo, defina a largura mínima da célula e copie o resultado. É a forma mais simples de criar um grid de cards fluido que se adapta do celular ao desktop sem escrever uma única media query.

grid-template-areas permite nomear regiões e desenhar o layout como arte ASCII. Você dá um nome a cada filho com grid-area, depois mapeia o grid com grid-template-areas: 'header header' 'sidebar main' 'footer footer'. Repetir um nome em células faz aquela área se estender por elas, e um ponto (.) deixa uma célula vazia. É a forma mais legível de construir estruturas de página clássicas — header, sidebar, conteúdo principal, footer — porque o template parece com o layout. A aba Áreas aqui escreve o template e as regras grid-area correspondentes para cada região que você nomear.

Para um grid 2x2, defina duas colunas e duas linhas: grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; e coloque quatro itens. Para um grid de 3 colunas, use grid-template-columns: repeat(3, 1fr) e deixe os itens fluírem por quantas linhas forem necessárias. Nesta ferramenta, você só define a quantidade de colunas e linhas e a pré-visualização atualiza na hora — sem precisar digitar nada. O gerador cuida da abreviação repeat() automaticamente quando trilhas vizinhas têm o mesmo tamanho.

O grid de 12 colunas é uma convenção de design popularizada pelo Bootstrap e pelo Foundation que divide a página em doze colunas iguais. Doze funciona porque se divide exatamente em metades, terços, quartos e sextos. Um componente pode abranger qualquer número inteiro de colunas: 6 para metade, 4 para um terço, 3 para um quarto. Com CSS Grid você o recria em uma linha: grid-template-columns: repeat(12, 1fr), e usa grid-column: span 4 nos filhos para dimensioná-los. Defina as colunas como 12 aqui para obter o grid clássico de framework em CSS puro, sem dependência do Bootstrap.

Grid é bidimensional — controla linhas e colunas juntas — enquanto flexbox é unidimensional, organizando itens ao longo de uma única linha ou coluna. Use grid quando estiver construindo um layout geral de página ou de cards com linhas e colunas alinhadas (dashboards, galerias, estruturas de página). Use flexbox para uma única faixa de conteúdo, como uma navbar, uma barra de ferramentas ou uma fileira de botões. Os dois funcionam bem juntos: um grid para a estrutura externa da página e flexbox dentro de células individuais.

O Tailwind tem utilitários de grid: adicione grid mais grid-cols-3 para três colunas iguais, gap-4 para espaçamento, e col-span-2 / row-span-2 nos filhos para fazê-los se estender. grid-cols-3 compila para repeat(3, minmax(0, 1fr)). Para algo personalizado — como uma trilha auto-fit responsiva — use um valor arbitrário: grid-cols-[repeat(auto-fit,minmax(150px,1fr))]. Mude a saída para a aba Tailwind e este gerador escreve as classes utilitárias exatas para o container e cada item, prontas para colar no seu JSX ou HTML.

Use grid-column e grid-row no filho. grid-column: span 2 faz um item ter duas colunas de largura; grid-column: 1 / 3 o posiciona da linha 1 à linha 3 (também duas colunas). O mesmo se aplica verticalmente com grid-row: span 2. No Tailwind são col-span-2 e row-span-2. Neste playground você pode arrastar pelas células na pré-visualização para criar um item que se estende, ou digitar valores exatos de início e span no painel do item. O CSS e a saída do Tailwind atualizam conforme você vai fazendo.

A propriedade gap adiciona espaço entre trilhas: gap: 16px coloca 16px entre todas as linhas e colunas. Você pode definir os eixos separadamente com gap: 24px 16px (row-gap depois column-gap), ou usar row-gap e column-gap diretamente. O gap só afeta o espaço entre células — ele nunca adiciona padding ao redor da borda externa do grid, o que é uma fonte comum de confusão. Use os controles de row-gap e column-gap aqui — vincule-os para um gap uniforme ou desvincula-os para ajustar cada eixo de forma independente.

Completamente grátis, sem cadastro e sem nada para instalar. O Layoutit Grid é um bom ponto de partida, mas não tem saída em Tailwind e exige clicar em uma aba separada para copiar as regras de grid-area. O CSS Grid Generator da Sarah Drasner é uma ferramenta educacional minimalista sem controles por item ou links compartilháveis. O UtiloKit adiciona saída em Tailwind CSS, áreas de template nomeadas, modo auto-fit responsivo, links compartilháveis e um editor interativo de itens com arrastar para estender — tudo em um só lugar. Tudo é gerado localmente no seu navegador, então seus layouts nunca são enviados a nenhum servidor.

Sim. A ferramenta é totalmente responsiva e funciona em qualquer navegador mobile moderno, incluindo Safari no iPhone e Chrome no Android. Crie layouts de grid no celular, copie o CSS ou a saída do Tailwind e cole no seu projeto. Como tudo roda no lado do cliente, não há upload, sem conta e sem espera. Funciona até offline depois que a página for carregada. O editor de arrastar para estender é compatível com toque, então dá pra criar layouts de grid complexos sem mouse.