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

Barra lateral + layout de grade CSS de conteúdo

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 com um layout de duas colunas e uma linha já nomeado: uma coluna de barra lateral de 200px ao lado de uma coluna de conteúdo flexível que ocupa o espaço restante. Ambas as áreas são visíveis imediatamente na visualização ao vivo, coloridas e rotuladas para que a divisão seja óbvia à primeira vista.

Este é o formato de navegação mais conteúdo mais comum na web – páginas de configurações, sites de documentação e painéis de administração, todos apoiados em um trilho de largura fixa ao lado de uma área principal fluida. Como a coluna da barra lateral usa um valor de pixel e a coluna de conteúdo usa 1fr, a barra lateral permanece com largura constante enquanto a coluna de conteúdo absorve cada pixel extra da janela de visualização.

Renomeie qualquer área, altere a largura da coluna ou adicione mais linhas para um cabeçalho acima da divisão – a saída CSS e HTML abaixo rastreia cada edição em tempo real. A ferramenta é gratuita e continua funcionando inteiramente no seu navegador, sem upload e sem conta.

🛡️
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.