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