O que é CSS Grid?
CSS Grid Layout é um sistema de layout bidimensional integrado aos navegadores modernos. Você define um contêiner de grade com display: grid, depois controla colunas com grid-template-columns e linhas com grid-template-rows. Unidades fracionárias (fr) distribuem o espaço disponível proporcionalmente. Elementos filhos podem se estender por múltiplas colunas ou linhas usando grid-column: span N e grid-row: span N.
Como usar o Gerador de CSS Grid
-
Defina o número de colunas e linhas usando os campos numéricos (1–12 cada).
-
Ajuste grid-template-columns e grid-template-rows para controlar os tamanhos (ex. 1fr 2fr, 200px auto).
-
Defina o espaço entre as células (ex. 10px, 1rem).
-
Clique em qualquer célula na visualização para selecioná-la (fica laranja).
-
Defina col-span e row-span no painel Extensão de célula, depois clique em Aplicar. Células com extensão ficam verdes.
-
Clique na aba CSS ou HTML para alternar o formato de saída, depois copie para a área de transferência.
-
Clique em Redefinir tudo para recomeçar com uma nova grade 3×3.