Sobre esta ferramenta
O Gerador de CSS Grid é uma ferramenta gratuita, executada no navegador, que transforma três controles simples — número de colunas, número de linhas e gap — em um layout de grade CSS pronto para colar. Defina os valores, veja uma pré-visualização ao vivo se redesenhar e copie a regra gerada.
Colunas e linhas são números inteiros de 1 a 12 (padrão 3 e 2), e o gap é um controle deslizante de 0 a 40 pixels (padrão 10). Ambas as dimensões são escritas com repeat() e a unidade 1fr, então cada faixa compartilha o espaço disponível de forma igual. A pré-visualização preenche cada célula com um bloco numerado e colorido para você ver a estrutura das faixas num relance, e a saída é uma regra .grid simples usando display: grid, grid-template-columns, grid-template-rows e gap. Um clique a copia para a área de transferência.
Tudo roda inteiramente no seu navegador — sem envio de dados, sem contas, sem rastreamento — e continua funcionando offline depois que a página carrega.