⭐ 0
🔍
Texto Imagem PDF e Documentos Áudio Música Eletrônica Tempo Utilitários Validadores Esoterismo Jogos

Layout de grade CSS do Santo Graal – Código pronto

Projete layouts de grade CSS visualmente: defina colunas, linhas e lacunas e, em seguida, digite nomes de áreas nas células para criar áreas de modelo de grade - com visualização ao vivo e CSS e HTML copiáveis.

Digite um nome em qualquer célula abaixo; células com o mesmo nome se fundem em uma região de áreas de modelo de grade.

Processando... 0%

Resultado

Esta página abre o gerador de grade pré-carregado com o layout do Santo Graal: três colunas e três linhas, com cabeçalho e rodapé abrangendo toda a largura e uma linha de navegação/principal/lateral no meio. A linha do cabeçalho usa altura automática, a linha do meio preenche o espaço restante e as duas colunas laterais são fixadas em 200px enquanto a coluna principal ocupa o restante.

O layout do Santo Graal ganhou esse nome porque era genuinamente difícil de construir de forma confiável antes do CSS Grid – anos de hacks flutuantes, layouts de tabelas e posicionamento absoluto tentaram falsificar esse formato exato. Com grid-template-areas ele se reduz a cinco regiões nomeadas e alguns tamanhos de trilha, e é por isso que continua sendo o primeiro exemplo padrão para ensinar CSS Grid.

Cada número e lacuna nesta página ainda está ativo: reduza as colunas laterais, adicione uma quarta linha ou renomeie uma área e a visualização e o CSS copiável serão atualizados imediatamente. Copie os blocos CSS e HTML diretamente para o seu projeto – tudo é executado localmente no seu navegador, nada é carregado.

🛡️
Executado no navegador

Seus arquivos e entradas nunca saem deste dispositivo. O processamento é executado totalmente offline. 100% seguro.

Formatos e regras aceitos

  • Entradas numéricas para 1 a 6 colunas e linhas, além de controles separados de lacuna de coluna e de lacuna de linha que se combinam em um valor de lacuna quando coincidem.
  • Um modo de áreas nomeadas: digite um nome de área diretamente em qualquer célula da grade ativa; a ferramenta cria uma string válida de grid-template-areas e avisa quando os nomes não formam retângulos limpos.
  • Bloco CSS copiável (display: grid, grid-template-columns/rows, gap, grid-template-areas) mais um esqueleto HTML correspondente com uma div de área de grade por região nomeada.

Principais benefícios

✓ Digite um nome diretamente em qualquer célula e os nomes correspondentes serão mesclados em uma região de áreas de modelo de grade - sem seleção de arrastar, sem adivinhar manualmente a sintaxe da string entre aspas.
✓ A grade de visualização ao vivo é redimensionada e recolorida a cada alteração, para que você veja as faixas exatas de coluna e linha e cada região nomeada antes de copiar uma única linha de CSS.
✓ Predefinições como o layout clássico do Santo Graal e uma barra lateral estreita fornecem uma declaração real e funcional de áreas de modelo de grade para começar, em vez de uma grade em branco.

Casos de uso

  • • Crie o shell clássico da página do Santo Graal - cabeçalho e rodapé de largura total com uma linha intermediária de navegação/principal/lateral - digitando nomes de áreas em vez de escrever à mão áreas de modelo de grade.
  • • Crie uma página de configurações ou painel de administração com uma barra lateral de largura fixa ao lado de uma coluna de conteúdo flexível e copie o CSS e HTML exatos quando a visualização ao vivo parecer correta.
  • • Verifique se um conjunto de áreas nomeadas realmente forma retângulos válidos antes do envio - a ferramenta sinaliza os nomes exatos que quebrariam as áreas de modelo de grade no navegador.