Gerador de CSS Grid

Como funciona

A aba grid monta listas de trilhas a partir das suas contagens e tamanhos: três colunas 1fr viram grid-template-columns: repeat(3, 1fr), o shorthand que se expande para uma fração do espaço livre por coluna. auto dimensiona a trilha pelo conteúdo, e um valor fixo em px reserva exatamente aquela largura — uma receita comum é uma trilha fixa de barra lateral mais uma trilha fluida 1fr. Se quiser uma trilha que flexiona com limites, edite a saída à mão para minmax(80px, 1fr); este construtor mantém isso fora do shorthand de propósito para o CSS gerado continuar legível.

A unidade fr

Um fr é uma fatia do espaço que sobra depois de subtrair trilhas de tamanho fixo, gaps e padding — espaço livre, não porcentagem. A distinção importa: com uma barra lateral de 200px, gap de 16px e duas colunas 1fr, cada fr recebe (largura − 216px) ÷ 2. Duas trilhas em 2fr 1fr dividem o mesmo resto 2:1, e um fr nunca estoura como porcentagens podem estourar quando você esquece os gaps.

Regras de nome do grid-template-areas

Cada string entre aspas é uma linha; cada token é uma célula, e os tokens precisam bater em quantidade entre as linhas. Uma área nomeada deve formar um retângulo perfeito — uma região em L é inválida e, sendo honesto, o navegador descarta a declaração grid-template-areas inteira quando qualquer nome quebra a regra, então a linha de aviso acima não é cosmética. Células vazias usam o ponto. Depois de pintada, cada item pode pegar uma área pelo nome em vez de contar linhas start/end.

Trilhas implícitas vs explícitas

Você declara o grid explícito — as trilhas de grid-template-columns e -rows. Conteúdo além dele (mais itens que células, ou um grid de áreas com itens não atribuídos) cria trilhas implícitas fora do modelo, dimensionadas por grid-auto-columns/-rows, que valem auto por padrão. É por isso que uma demo que parece ter linhas extras misteriosas normalmente apenas estourou o grid explícito.

Perguntas frequentes