Gerador de CSS Grid
Desenhe layouts de CSS Grid visualmente: defina colunas, linhas e o espaçamento entre elas, depois escreva nomes de áreas nas células para construir grid-template-areas — com pré-visualização ao vivo e CSS e HTML prontos a copiar.
🔒 Processado inteiramente em seu navegador – nada que você digita aqui é carregado.
Resultado
Uma declaração grid-template-areas é uma das peças de CSS mais legíveis que existem, mas só depois de criada — fazê-la manualmente implica contar strings entre aspas e igualar comprimentos de linhas, e uma única célula trocada quebra silenciosamente todo o layout. Este gerador transforma isso em manipulação direta: defina o número de colunas e linhas, escreva um nome em qualquer célula da grelha ao vivo e os nomes iguais unem-se automaticamente numa região nomeada.
Internamente, cada célula deixada em branco torna-se um ponto na string grid-template-areas gerada, e cada célula com nome passa a fazer parte do retângulo desse nome. O CSS só permite que uma região nomeada ocupe um único bloco retangular limpo, por isso a ferramenta verifica isso enquanto escreve e indica exatamente quando um nome ainda não está a formar um retângulo válido — em vez de produzir silenciosamente CSS que o navegador rejeitará.
Column-gap e row-gap têm o valor predefinido de 8px e combinam-se numa única linha gap quando coincidem, e a grelha de pré-visualização ao vivo espelha sempre as suas faixas grid-template-columns e grid-template-rows, incluindo colunas com píxeis fixos de um modelo como as colunas laterais de 200px do "holy grail". O resultado pronto a copiar cobre ambas as partes: um bloco CSS pronto para a sua folha de estilos e um esqueleto HTML correspondente com um div grid-area por cada região nomeada.
Grid e flexbox resolvem problemas de layout diferentes, e o css-flexbox-generator neste site é o melhor ponto de partida para layouts unidimensionais — uma única linha ou coluna de itens flexíveis, como uma barra de navegação ou uma pilha de cartões. Recorra antes a este gerador de grelhas quando precisar de controlo bidimensional, linhas e colunas explícitas ou regiões nomeadas como header/nav/main/footer; as duas ferramentas acabam muitas vezes na mesma página, grid para a estrutura da página e flexbox para os seus componentes. Tal como todas as ferramentas neste site, é executado totalmente no seu navegador — sem envio de dados, sem conta.