Gerador de CSS Grid

Defina as suas colunas e linhas, arraste pelas células para posicionar os itens e copie o CSS do grid com o HTML correspondente num único clique.

Predefinições
Itens
CSS
HTML
Arraste pelo grid para posicionar um item.

O seu grid é criado diretamente no seu navegador. Nada do que definir aqui é carregado para o BroBroGo.

Perguntas Frequentes

Como posso posicionar itens no grid?

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

As colunas e linhas podem ter tamanhos diferentes?

Sim. Cada faixa (track) tem o seu próprio campo de tamanho, onde pode introduzir qualquer valor válido de grid — como 1fr, 200px, auto, min-content ou minmax(120px, 1fr). Faixas que partilham o mesmo tamanho são agrupadas na função repeat() para manter o código curto. Os espaçamentos de coluna e linha são definidos separadamente e unem-se numa única propriedade gap quando coincidem.

O que devo fazer com o código gerado?

Copie o CSS e o HTML gerados. O HTML fornece o contentor 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.

Escrito e revisto pela equipa editorial do BroBroGo.Última atualização:

O que é o Gerador de CSS Grid e como funciona

O Gerador de CSS Grid é uma ferramenta visual concebida para simplificar a criação de layouts baseados no sistema CSS Grid. Esta ferramenta permite-lhe desenhar a estrutura do seu layout diretamente no navegador, definindo o número de colunas e linhas, ajustando os seus tamanhos e especificando os espaçamentos (gaps) entre as faixas.

Após configurar a estrutura base, pode arrastar o rato pelas células do grid para posicionar os seus itens visualmente. À medida que desenha o seu layout, a ferramenta gera automaticamente o código CSS e HTML correspondente, pronto a ser copiado e colado diretamente no seu projeto de desenvolvimento web.

Configuração de colunas, linhas e espaçamentos

A ferramenta oferece um conjunto de controlos intuitivos para moldar a estrutura do seu grid:

  • Colunas: Permite definir um número de colunas entre 1 e 12.
  • Linhas (Rows): Permite definir um número de linhas entre 1 e 12.
  • Espaçamento das colunas: Um valor numérico ajustável entre 0 e 48px.
  • Espaçamento das linhas (Row gap): Um valor numérico ajustável entre 0 e 48px.

Para além do número de faixas, cada coluna e linha individual possui a sua própria caixa de tamanho. Isto significa que pode digitar qualquer valor de grid CSS válido para cada faixa, tais como 1fr, 200px, auto, min-content ou expressões mais complexas como minmax(120px, 1fr).

Posicionamento visual de itens e regras de sobreposição

O posicionamento de elementos no grid é feito de forma totalmente visual. Ao clicar e arrastar o cursor através das células, marca uma área retangular. Assim que solta o botão do rato, é criado um item filho posicionado que abrange as colunas e linhas selecionadas.

Existem regras específicas que regem o comportamento destes itens na ferramenta:

  • Geração de código: Cada item desenhado recebe a sua própria regra grid-column e grid-row no código CSS gerado, bem como um elemento div correspondente no código HTML.
  • Sobreposição: Os itens criados podem sobrepor-se. Quando ocorre sobreposição, o item que foi desenhado mais recentemente (por último) fica posicionado por cima dos anteriores.
  • Remoção: Cada item apresenta um botão "×" que, ao ser clicado, remove instantaneamente esse elemento do layout.
  • Limite de elementos: A ferramenta suporta a criação de um máximo de 16 itens em simultâneo.

Otimização do código CSS e validação de dados

O gerador foi programado para produzir código limpo e otimizado, aplicando regras de simplificação modernas:

  • Agrupamento com repeat(): Se várias faixas (colunas ou linhas) partilharem exatamente o mesmo tamanho, a ferramenta agrupa-as automaticamente utilizando a função repeat() no CSS final para manter o código conciso.
  • Fusão de espaçamentos: Embora o "Espaçamento das colunas" e o "Espaçamento das linhas" sejam definidos de forma independente na interface, eles colapsam numa única propriedade simplificada gap no CSS gerado sempre que os seus valores forem idênticos.
  • Tratamento de erros: Se introduzir um valor inválido (como por exemplo not-a-grid-track) no campo de tamanho de uma faixa, o campo de entrada é marcado visualmente como inválido. No entanto, para evitar quebras no código, a saída de CSS retém o último valor válido que foi introduzido.

Predefinições de layout disponíveis

Para acelerar o processo de prototipagem, a ferramenta inclui várias predefinições (presets) comuns de design web que podem ser aplicadas com um clique:

  • Barra lateral: Ideal para layouts com uma coluna lateral de navegação ou conteúdo secundário.
  • Cabeçalho e rodapé: Estrutura clássica de três secções verticais (topo, conteúdo central e base).
  • Galeria: Esta predefinição gera automaticamente uma estrutura de 3 colunas, 2 linhas e posiciona 3 itens no grid.
  • Painel (Dashboard): Uma disposição otimizada para painéis de controlo e visualização de dados.

Adicionalmente, pode utilizar as funções de controlo manual como "Adicionar item" para gerar um novo item HTML, ou "Limpar itens" para esvaziar por completo o contentor HTML e repor a contagem para 0 itens.

Privacidade e processamento local

A sua privacidade é salvaguardada durante a utilização desta ferramenta. O seu grid é criado e processado diretamente no seu navegador de internet. Nenhuma das configurações, tamanhos ou estruturas que definir na ferramenta é carregada para servidores externos ou para o BroBroGo.

Perguntas Frequentes (FAQ)

Como posso posicionar itens no grid?

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

As colunas e linhas podem ter tamanhos diferentes?

Sim. Cada faixa (track) tem o seu próprio campo de tamanho, onde pode introduzir qualquer valor válido de grid — como 1fr, 200px, auto, min-content ou minmax(120px, 1fr). Faixas que partilham o mesmo tamanho são agrupadas na função repeat() para manter o código curto. Os espaçamentos de coluna e linha são definidos separadamente e unem-se numa única propriedade gap quando coincidem.

O que devo fazer com o código gerado?

Copie o CSS e o HTML gerados. O HTML fornece o contentor 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.

Gerador de Cubic Bezier CSSArraste as duas alças para criar uma curva de transição, veja o movimento em tempo real comparado com uma velocidade constante e copie o valor de cubic-bezier().Gerador de FlexboxConfigure um contentor flex e os seus itens com controlos visuais, veja o layout reagir em tempo real e copie o CSS com um único clique.Gerador de Box ShadowArraste os controlos para criar sombras box-shadow, empilhe camadas para dar profundidade e copie o CSS pronto instantaneamente.Gerador de GradientesCrie gradientes lineares, radiais ou cônicos, adicione pontos de cor, defina a direção e copie o CSS com um único clique.Gerador de Border RadiusArredonde cada canto com controlos deslizantes, crie gotas orgânicas com o modo elíptico e copie o CSS instantaneamente.Calculadora de clamp() CSSIntroduza um tamanho para ecrãs pequenos e grandes e obtenha um valor clamp() fluido que escala suavemente entre eles — para fontes, paddings, margins ou gaps.