Gerador de grid CSS
Converta um esboço de layout em texto num grid CSS real com áreas nomeadas.
Gerador de grid CSS
Cole um esboço básico do layout de uma página e esta ferramenta transforma-a em código CSS grid funcional. Escreva cada linha do layout na sua própria linha e repita a mesma palavra nas células para marcar uma região nomeada — "cabeçalho cabeçalho" numa linha, "nav conteúdo" na seguinte, "rodapé rodapé" na última descreve um layout clássico de três linhas com cabeçalho e rodapé de largura total. A ferramenta lê os nomes repetidos como áreas de grid e gera a declaração grid-template-areas correspondente automaticamente.
As opções controlam o resto do CSS gerado. Defina o espaçamento entre células em pixels e, opcionalmente, dê largura ou altura explícita às colunas ou linhas usando qualquer tamanho de pista CSS válido — unidades fr, auto ou minmax(); deixe qualquer campo vazio e a ferramenta espaça as pistas uniformemente. Ative as regras por área para obter uma declaração grid-area pronta para cada secção nomeada, utilizando um prefixo de classe à sua escolha, para que "cabeçalho" se torne .grid-cabeçalho de imediato. Uma chave responsiva adiciona uma media query max-width que reduz todo o layout para uma única coluna em ecrãs estreitos, e uma chave HTML anexa um esqueleto de marcação correspondente para que possa ver a estrutura ao lado do CSS.
Se dois células com o mesmo nome não formarem um rectângulo sólido — uma forma de L ou um nome que ignore uma célula — o CSS grid real não pode renderizar essa área corretamente, por isso a ferramenta marca-a diretamente na saída como um comentário de aviso em vez de gerar regras com aparência inválida silenciosamente. As quebras de linha de qualquer sistema operativo são processadas da mesma forma, e o contador em direto abaixo da saída rastreia quantas linhas de layout, áreas nomeadas e caracteres o CSS gerado contém.
Tudo funciona localmente no seu navegador; o layout que desenha e o CSS que recebe nunca são enviados para lado nenhum. Copie o resultado, descarregue-o como um ficheiro .txt ou envie a saída diretamente para outra ferramenta, como o formatador CSS, para ajustar o alinhamento ainda mais.