Gerador de CSS Grid
Defina suas colunas e linhas, arraste pelas células para posicionar os itens e copie o CSS do grid com o HTML correspondente em um clique.
Seu grid é criado diretamente no seu navegador. Nada do que você define aqui é enviado para o BroBroGo.
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.