Pular para o conteúdo
Aback Tools Logo

Gerador de CSS Grid

Crie layouts CSS Grid visualmente com controles de colunas, linhas e espaçamento — na hora e de graça. Escolha entre unidades fr, px, % ou auto para colunas e linhas. Seis predefinições de layout oferecem pontos de partida instantâneos. Veja a pré-visualização da grade com células numeradas e copie o CSS pronto para produção em um clique. Totalmente privado, sem cadastro.

CSS Grid Generator
Visual CSS Grid layout builder. Set columns, rows, and gap values with live preview. Choose from layout presets and copy the generated CSS with one click.

Layout Presets

Columns

3
1fr

Rows

3

Auto rows size to fit content

Gaps

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

Live Preview

1
2
3
4
5
6
7
8
9
3 × 3 grid9 cellsGap: 12×12px

Por que usar nosso gerador de CSS Grid?

  • Pré-visualização ao vivo e CSS instantâneo: o gerador atualiza a pré-visualização ao vivo e a saída CSS a cada mudança — sem botão para pressionar. Veja exatamente quantas colunas, linhas e células sua grade cria e copie a declaração CSS em um clique.
  • Unidades flexíveis e predefinições de layout: escolha entre unidades fr, px, % ou auto para colunas e linhas. Seis predefinições oferecem pontos de partida instantâneos — de grades simples de 3 colunas a layouts complexos de 12 colunas e configurações com barra lateral.
  • 100% privado — sem upload: toda a geração de CSS Grid acontece localmente no seu navegador. Suas escolhas de layout nunca saem do dispositivo nem são enviadas a servidores — seguro para projetos de clientes e sistemas de design proprietários.
  • Grátis e sem limites: gere layouts de grade ilimitados sem cadastro, sem assinatura e sem limites de uso. O gerador é totalmente grátis para sempre e sem anúncios bloqueando a interface.

Casos de uso comuns do gerador de CSS Grid

  • Layouts de página responsivos: web designers usam o gerador para prototipar layouts responsivos com estruturas de colunas flexíveis. A unidade fr cria grades fluidas que se adaptam a qualquer tela, enquanto as unidades px dão controle preciso para barras laterais e cabeçalhos de largura fixa.
  • React e bibliotecas de componentes: desenvolvedores front-end usam o gerador para projetar componentes baseados em grade para React, Vue e Angular. Copie o CSS exato e integre em estilos de componentes, styled-components ou soluções CSS-in-JS.
  • Entrega de design para código: designers usam o gerador para traduzir layouts de grade do Figma, Sketch ou Adobe XD em código CSS preciso para os desenvolvedores. A pré-visualização visual corresponde ao mockup, eliminando adivinhações na entrega.
  • Layouts de template de e-mail: desenvolvedores de e-mail usam o gerador para criar layouts sem tabelas com CSS Grid (compatível com Apple Mail, Outlook.com e Yahoo Mail). Os valores de colunas e espaçamento produzem estruturas de e-mail limpas e responsivas.
  • Aprendizado e experimentação de CSS: quem está aprendendo front-end usa o gerador para entender como grid-template-columns, grid-template-rows e gap funcionam juntos. A pré-visualização visual facilita ver como cada controle afeta a grade final.
  • Grades de cartões e galerias: criadores de conteúdo usam o gerador para projetar layouts baseados em cartões para arquivos de blog, galerias de produtos, portfólios e widgets de painel. A pré-visualização ao vivo mostra o número exato de células e o alinhamento.

O que é CSS Grid?

O CSS Grid Layout (também conhecido como CSS Grid) é um sistema de layout bidimensional que permite controlar colunas e linhas simultaneamente. Diferente do Flexbox, que é unidimensional, o Grid lida com layouts de página complexos com itens alinhados nas duas direções. As propriedades principais são grid-template-columns, grid-template-rows e gap (antes grid-gap). Nosso gerador cria essas propriedades visualmente e produz CSS pronto para produção para qualquer navegador moderno.

Como funciona nosso gerador de CSS Grid

  1. Defina colunas e linhas: use os controles deslizantes para definir o número de colunas (1-12) e linhas (1-12). Escolha uma unidade para cada dimensão — fr (fração do espaço disponível), px (pixels fixos), % (porcentagem do contêiner) ou auto (ajustar ao conteúdo). A pré-visualização é atualizada na hora.
  2. Ajuste os espaçamentos e largura/altura: defina os valores de espaçamento de coluna e linha de forma independente com os controles deslizantes (0-100px). Se usar unidades fr, px ou %, defina o tamanho da faixa. A pré-visualização mostra células numeradas para você ver exatamente quantos itens pode colocar.
  3. Copie o CSS: clique em «Copiar CSS» para copiar a declaração CSS pronta para produção para a área de transferência. A saída inclui display: grid, grid-template-columns, grid-template-rows e gap.

As unidades do CSS Grid explicadas

  • fr (unidade de fração): distribui o espaço disponível proporcionalmente entre colunas/linhas. 1fr 2fr cria duas colunas em que a segunda tem o dobro da largura da primeira. A unidade fr é a escolha mais comum para grades responsivas.
  • px (pixels): cria faixas de tamanho fixo que não mudam quando o contêiner é redimensionado. Use px para barras laterais de largura fixa, grades de ícones e elementos com requisitos precisos de tamanho.
  • % (porcentagem): cria faixas dimensionadas como porcentagem da largura do contêiner. Observe que valores percentuais são calculados a partir do espaço disponível após subtrair os espaçamentos.
  • auto: dimensiona a faixa para ajustar ao conteúdo. Colunas auto expandem até a largura do item mais largo e linhas auto até a altura do item mais alto da linha.

Compatibilidade de navegadores e boas práticas

O CSS Grid é compatível com todos os navegadores modernos (Chrome 57+, Firefox 52+, Safari 10.1+, Edge 16+) sem prefixos de fornecedor. Para melhores resultados, use a unidade fr para colunas responsivas e auto para linhas que se adaptam à altura do conteúdo. A propriedade abreviada gap aceita um valor (espaçamentos iguais) ou dois valores (linha coluna), o que nosso gerador lida automaticamente.

Perguntas frequentes

Um gerador de CSS Grid é uma ferramenta visual que cria código de layout CSS Grid permitindo definir o número de colunas, linhas e valores de espaçamento e ver o resultado ao vivo. Nosso gerador suporta unidades fr, px, % e auto com seis predefinições de layout. Toda a geração roda no seu navegador sem enviar dados a servidores.

O CSS Grid é bidimensional e controla colunas e linhas simultaneamente, tornando-o ideal para layouts de página. O Flexbox é unidimensional, para distribuir itens ao longo de um único eixo. Use Grid para layouts e Flexbox para alinhamento de componentes.

A unidade fr (fração) distribui o espaço disponível proporcionalmente entre as faixas da grade. Por exemplo, grid-template-columns: 1fr 2fr cria duas colunas em que a segunda tem o dobro da largura da primeira. É a unidade mais comum para layouts de grade responsivos.

Sim. Toda a geração de CSS Grid acontece 100% no lado do cliente, no seu navegador. Suas escolhas de layout nunca são enviadas a servidores, nunca são armazenadas e nunca são transmitidas.

Sim. É 100% grátis, sem cadastro, sem recursos premium e sem limites de uso. Gere layouts de grade ilimitados sem restrições.

Nosso gerador suporta quatro unidades: fr (fração do espaço disponível), px (pixels fixos), % (porcentagem do contêiner) e auto (ajustar ao conteúdo). Escolha unidades diferentes para colunas e linhas de forma independente.

Use a unidade fr para as colunas e você criará grades responsivas que se adaptam à largura do contêiner. Uma grade de 3 colunas com colunas 1fr divide o espaço disponível igualmente em qualquer tamanho de tela.

Sim. Use valores arbitrários no Tailwind: className="grid grid-cols-[repeat(3,1fr)] gap-4". Todas as unidades (fr, px, %) funcionam com a sintaxe de valores arbitrários do Tailwind.