Gerador de CSS Grid

Introdução ao CSS Grid Layout

O CSS Grid Layout é um sistema de layout bidimensional para a web, projetado para gerenciar colunas e linhas simultaneamente. O Gerador de CSS Grid permite estruturar esses layouts de forma visual, definindo a quantidade de linhas e colunas, ajustando os espaçamentos e desenhando a área de cada item diretamente na tela. O resultado é a geração imediata do código CSS e HTML necessário para reproduzir a estrutura no seu projeto.

Configuração de Colunas, Linhas e Espaçamentos

A construção do grid começa com a definição da estrutura de faixas (tracks) e dos espaçamentos entre elas. O gerador opera com limites específicos para garantir a integridade do layout visual:

• Colunas: Permite definir um número entre 1 e 12 colunas.
• Linhas: Permite definir um número entre 1 e 12 linhas.
• Espaçamento das colunas: Ajustável entre 0 e 48px.
• Espaçamento das linhas: Ajustável entre 0 e 48px.

Os espaçamentos de coluna e linha são configurados de forma independente no painel lateral. No código CSS gerado, essas propriedades são tratadas individualmente como column-gap e row-gap. No entanto, quando os valores definidos para ambos os espaçamentos são idênticos, o gerador otimiza o código, unindo-os em uma única propriedade simplificada chamada gap.

Dimensionamento de Faixas e a Unidade fr

Cada coluna e linha criada possui seu próprio campo de entrada para definição de tamanho. O gerador aceita qualquer valor de dimensão válido na especificação do CSS Grid. Entre as opções de dimensionamento mais comuns estão:

• 1fr: A unidade de fração (fr) representa uma parte do espaço flexível disponível no contêiner do grid.
• 200px: Um valor absoluto em pixels que fixa a largura ou altura da faixa.
• auto: Define o tamanho da faixa com base no tamanho do conteúdo ou do contêiner.
• min-content: Ajusta a faixa para o tamanho mínimo do seu conteúdo sem transbordar.
• minmax(120px, 1fr): Define um limite fluido, onde a faixa não pode ser menor que 120px e se expande para ocupar até 1 fração do espaço disponível.

Se um valor inválido (como not-a-grid-track) for digitado no campo de tamanho de uma faixa, o campo de entrada correspondente é marcado como inválido. Para evitar a quebra do layout, a saída de código CSS gerada mantém o último valor válido que foi inserido anteriormente.

Para manter o código limpo e legível, o gerador analisa as dimensões inseridas. Quando faixas consecutivas compartilham exatamente o mesmo tamanho, o CSS gerado agrupa essas definições utilizando a função repeat().

Posicionamento de Itens no Grid

A distribuição dos elementos dentro da estrutura do grid é feita de forma visual. Ao clicar e arrastar o cursor do mouse pelas células do grid, você desenha uma área retangular. Ao soltar o clique, um item filho é posicionado ocupando o intervalo de colunas e linhas selecionado.

O comportamento do posicionamento segue regras específicas:

• Geração de regras: Cada item desenhado recebe regras exclusivas de grid-column e grid-row no CSS, além de uma tag div correspondente no HTML.
• Sobreposição: Os itens podem ocupar as mesmas coordenadas. O item que for desenhado por último é posicionado sobre os anteriores na ordem de empilhamento visual.
• Remoção: Cada item exibe um botão "×" que, ao ser clicado, remove o elemento do layout.
• Limite de elementos: O gerador suporta a criação de no máximo 16 itens simultâneos.
• Controle manual: O botão "Adicionar item" gera um novo elemento HTML no grid, enquanto o botão "Limpar itens" remove todos os elementos criados, resultando em um contêiner HTML vazio e um contador de 0 itens.

Predefinições de Layout Comuns

Para acelerar o processo de prototipagem, o gerador oferece estruturas prontas através da seção "Predefinições". Essas opções configuram automaticamente as linhas, colunas e itens para os padrões mais utilizados na web:

• Barra lateral: Estrutura clássica com uma coluna estreita para navegação e uma coluna larga para o conteúdo principal.
• Cabeçalho e rodapé: Layout vertical dividido em topo (header), área central de conteúdo e base (footer).
• Galeria: Configuração que gera automaticamente 3 colunas, 2 linhas e 3 itens distribuídos de forma simétrica.
• Painel (Dashboard): Estrutura modular complexa com múltiplos blocos para exibição de dados e métricas.

Privacidade e Processamento Local

A segurança dos seus dados de desenvolvimento é mantida pelo modelo de execução da ferramenta. Todo o processamento do layout, cálculos de dimensionamento e geração de código ocorrem diretamente no navegador do usuário. Nenhuma das configurações, tamanhos ou estruturas que você define no gerador é enviada para servidores externos ou para o BroBroGo.

---

Perguntas Frequentes (FAQ)

Como posiciono itens no grid? Clique e arraste pelas células para desenhar um retângulo — ao soltar, ele se torna um elemento posicionado ocupando essas colunas e linhas. Cada item desenhado ganha suas próprias regras de grid-column e grid-row no CSS e uma div correspondente no HTML. Os itens podem se sobrepor, e o que for desenhado por último ficará por cima; use o × no item para removê-lo.

As colunas e linhas podem ter tamanhos diferentes? Sim. Cada faixa (track) tem seu próprio campo de tamanho, onde você pode digitar qualquer valor válido de grid — como 1fr, 200px, auto, min-content ou minmax(120px, 1fr). Faixas que compartilham o mesmo tamanho são agrupadas na função repeat() para manter o código limpo. Os espaçamentos de coluna e linha são definidos separadamente e se unem em uma única propriedade gap quando são iguais.

O que eu faço com o código gerado? Copie o CSS e o HTML gerados. O HTML fornece o contêiner com uma div para cada item, e o CSS define o grid e posiciona cada um deles. Cole ambos no seu projeto para obter exatamente o mesmo layout que desenhou aqui.