Gerador de grade CSS (Grid)

Defina um número de colunas, de linhas e um espaçamento para obter instantaneamente o código CSS Grid correspondente, com pré-visualização ao vivo.

Exemplo:

Como funciona

CSS Grid permite definir uma grade em duas dimensões em uma única propriedade, ao contrário do Flexbox que gerencia apenas um eixo por vez. Esta ferramenta gera um grid-template-columns e grid-template-rows com colunas e linhas de tamanho igual (1fr), prático para uma galeria de imagens ou um painel em um clique.

O que significa «1fr» no código gerado?

A unidade fr (fração) distribui o espaço disponível igualmente entre as colunas ou linhas; repeat(3, 1fr) cria, portanto, três colunas de largura idêntica que compartilham todo o espaço do contêiner.

Posso ter colunas de tamanhos diferentes?

Sim, esta ferramenta gera um ponto de partida simples com colunas iguais; você pode então editar manualmente grid-template-columns para usar valores fixos ou variados como 200px 1fr 2fr.

Processamento 100% local: o código é gerado inteiramente no seu navegador via WebAssembly.