Pressione Ctrl+D para adicionar esta página aos favoritos
O gerador CSS Grid é uma ferramenta online gratuita que projeta layouts de grade visualmente.
Como usar Gerador CSS Grid?
Defina o número de linhas e colunas.
Arraste células para mesclar áreas ou ajustar a posição.
Copie o código CSS Grid gerado e use no seu projeto.
Perguntas frequentes sobre Gerador CSS Grid
Qual a diferença entre CSS Grid e Flexbox?
CSS Grid é para layouts 2D (linhas + colunas), enquanto Flexbox é para 1D (linha ou coluna). Grid é mais adequado para layouts de página complexos.
O que é a unidade fr?
fr (fraction) é uma unidade proporcional usada no CSS Grid. Por exemplo, 1fr 2fr divide o espaço na proporção 1:2. Muito útil para layouts responsivos.
Dá para montar um grid responsivo sem media queries?
Dá. Escrevendo repeat(auto-fit, minmax(240px, 1fr)) você fixa apenas a largura mínima da coluna e deixa o navegador calcular o resto: colunas surgem quando a janela cresce e somem quando encolhe, cobrindo do celular ao desktop sem um único breakpoint. Note que auto-fill deixa trilhas vazias no espaço que sobra, enquanto auto-fit estica as existentes para preenchê-lo — por isso divergem quando há poucos itens.
Uma palavra longa estica uma coluna do grid e quebra o layout.
Itens de grid têm tamanho mínimo automático por padrão, ou seja, se recusam a encolher abaixo do conteúdo — uma URL longa ou uma palavra que não quebra escancara a coluna inteira. Definir min-width: 0 nesse item deixa o grid encolhê-lo de novo, e acrescentar overflow-wrap: anywhere faz a sequência longa quebrar em linhas. Declarar a trilha como minmax(0, 1fr) em vez de apenas 1fr elimina a causa de vez, e por isso é tão comum.
Como aproveitar Gerador CSS Grid ao máximo?
repeat(auto-fit, minmax(240px, 1fr)) se reorganiza sozinho, sem precisar de media queries.
Use gap em vez de margens para a última coluna não ficar com espaço sobrando.
Em layouts complexos, nomeie as áreas com grid-template-areas: fica muito mais legível depois.