Playground de Grid CSS

O CSS grid transforma um elemento num layout bidimensional. Defines display: grid no contentor, defines as tracks de colunas e linhas com grid-template-columns e grid-template-rows, e o browser coloca 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. Ao contrário dos layouts antigos com float ou flexbox, o grid organiza linhas e colunas ao mesmo tempo, pelo que controlas os dois eixos a partir de uma única propriedade do contentor.

Adiciona display: grid a um contentor e descreve as suas tracks. O mínimo é uma linha: display: grid; grid-template-columns: 1fr 1fr; — que dá duas colunas iguais. A partir daí adicionas grid-template-rows para linhas explícitas, gap para espaçamento e regras por item como grid-column: span 2 para fazer um filho estender-se por células. A propriedade abreviada grid pode combinar linhas, colunas e áreas numa só declaração, mas a maioria dos programadores define grid-template-columns, gap e alinhamento separadamente porque é mais legível. Este gerador escreve essas regras por ti.

Definem o tamanho de cada track de coluna e linha. grid-template-columns: 200px 1fr 1fr cria uma primeira coluna fixa de 200px e duas colunas flexíveis que partilham o restante espaço. grid-template-rows: auto 1fr define uma primeira linha dimensionada pelo conteúdo e uma segunda linha que preenche a altura restante. Cada valor na lista é uma track, e o número de valores define quantas colunas ou linhas explícitas o grid tem. Este gerador constrói ambas as listas à medida que adicionas e editas tracks, actualizando a pré-visualização em tempo real.

fr é a unidade de 'fracção' — divide o espaço sobrante, pelo que repeat(3, 1fr) cria três colunas de largura igual. repeat(n, valor) é uma abreviatura que repete um padrão de track n vezes, pelo que repeat(4, 1fr) equivale a 1fr 1fr 1fr 1fr. minmax(min, max) define uma track que nunca encolhe abaixo do mínimo nem cresce além do máximo; minmax(150px, 1fr) mantém uma coluna com pelo menos 150px de largura enquanto lhe permite expandir. Combina-os — repeat(auto-fit, minmax(150px, 1fr)) — para um grid que adiciona e remove colunas por si mesmo à medida que a largura do contentor muda.

Usa repeat() com auto-fit (ou auto-fill) e minmax() para que o grid reflua automaticamente: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). Cada coluna mantém pelo menos 200px de largura e o browser encaixa tantas quantas o contentor permite, reduzindo para menos colunas em ecrãs estreitos e adicionando mais em ecrãs largos. Muda este gerador para o modo Responsivo, define a largura mínima de célula e copia o resultado. É a forma mais simples de construir uma grelha de cartões fluida que se adapta do mobile ao desktop sem escrever uma única media query.

grid-template-areas permite-te dar nomes a regiões e desenhar o layout como arte em ASCII. Atribuis a cada filho um nome com grid-area e depois mapeias o grid como grid-template-areas: 'header header' 'sidebar main' 'footer footer'. Repetir um nome em várias células faz com que essa área as abranja, e um ponto (.) deixa uma célula vazia. É a forma mais legível de construir estruturas de página clássicas — cabeçalho, barra lateral, conteúdo principal, rodapé — porque o template parece-se com o layout. O separador Areas aqui escreve o template e as regras grid-area correspondentes para cada região com nome.

Para um grid 2x2, define duas colunas e duas linhas: grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; e coloca quatro itens. Para um grid de 3 colunas, usa grid-template-columns: repeat(3, 1fr) e deixa os itens fluir para tantas linhas quantas forem necessárias. Nesta ferramenta basta definir o número de colunas e linhas e a pré-visualização actualiza-se imediatamente — sem necessidade de escrever código. O gerador trata automaticamente da abreviatura repeat() quando tracks adjacentes têm o mesmo tamanho.

A grelha 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 facilmente 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 recrias-a numa linha: grid-template-columns: repeat(12, 1fr), e usas grid-column: span 4 nos filhos para os dimensionar. Define as colunas para 12 aqui para obteres a grelha clássica de framework como CSS puro sem dependência do Bootstrap.

O grid é bidimensional — controla linhas e colunas em conjunto — enquanto o flexbox é unidimensional, organizando itens ao longo de uma única linha ou coluna. Usa grid quando estás a construir um layout de página geral ou de cartões com linhas e colunas alinhadas (dashboards, galerias, estruturas de página). Usa flexbox para uma única faixa de conteúdo como uma barra de navegação, barra de ferramentas ou uma linha de botões. Funcionam bem em conjunto: grid para a estrutura exterior da página, flexbox dentro de células individuais.

O Tailwind inclui utilitários de grid: adiciona 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 os fazer abranger. grid-cols-3 compila para repeat(3, minmax(0, 1fr)). Para algo personalizado — como uma track auto-fit responsiva — usa um valor arbitrário: grid-cols-[repeat(auto-fit,minmax(150px,1fr))]. Muda o output para o separador Tailwind e este gerador escreve as classes utilitárias exactas para o teu contentor e cada item, prontas a colar no teu JSX ou markup HTML.

Usa grid-column e grid-row no filho. grid-column: span 2 faz um item ter duas colunas de largura; grid-column: 1 / 3 coloca-o da linha 1 à linha 3 (também duas colunas). O mesmo aplica-se verticalmente com grid-row: span 2. Em Tailwind é col-span-2 e row-span-2. Neste playground podes arrastar pelas células na pré-visualização para criar um item que abranja várias, ou escrever os valores exactos de início e extensão no painel do item. O output em CSS e Tailwind actualiza-se à medida que trabalhas.

A propriedade gap adiciona espaço entre tracks: gap: 16px coloca 16px entre cada linha e coluna. Podes definir os eixos separadamente com gap: 24px 16px (row-gap depois column-gap), ou usar row-gap e column-gap directamente. O gap apenas afecta o espaço entre células — nunca adiciona padding em torno da margem exterior do grid, o que é uma fonte comum de confusão. Usa os controlos de row-gap e column-gap aqui — liga-os para um espaçamento uniforme ou desliga-os para ajustar cada eixo de forma independente.

Completamente gratuito, sem registo e sem nada para instalar. O Layoutit Grid é um bom ponto de partida, mas não tem output Tailwind e exige navegar para um separador separado para copiar as regras de grid-area. O CSS Grid Generator da Sarah Drasner é uma ferramenta educativa minimalista sem controlos ao nível dos itens nem ligações partilháveis. O UtiloKit adiciona output Tailwind CSS, áreas de template com nome, modo auto-fit responsivo, ligações partilháveis e um editor interactivo de itens com arrastar para abranger — tudo num só lugar. Tudo é gerado localmente no teu browser, pelo que os teus layouts nunca são enviados para qualquer servidor.

Sim. A ferramenta é totalmente responsiva e funciona em qualquer browser mobile moderno, incluindo Safari no iPhone e Chrome no Android. Constrói layouts de grid em qualquer lugar, copia o output em CSS ou Tailwind e cola-o no teu projecto. Como tudo corre no lado do cliente, não há envio de dados, não é necessária conta e não há esperas. Funciona mesmo offline depois de a página ter sido carregada. O editor de itens com arrastar para abranger é compatível com toque, pelo que podes construir layouts de grid complexos sem rato.