Gerador de CSS Grid

O contêiner gerado

display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;

@media (max-width: 660px) {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

• repeat(3, minmax(0, 1fr)): três colunas que dividem igualmente a largura disponível. 1fr é uma fração do espaço restante; minmax(0, 1fr) permite que as colunas encolham abaixo do tamanho do conteúdo.
• gap: o espaço entre cada track.
• A media query muda para repeat(auto-fit, minmax(220px, 1fr)), que cria quantas colunas couberem, cada uma com pelo menos 220px. O ponto de quebra é o número de colunas vezes a largura mínima (com um piso de 120px), então em telas pequenas a grade reorganiza as linhas em vez de espremer as colunas.

A unidade fr

fr significa “uma fração do espaço restante”: depois de subtrair as tracks de tamanho fixo, o espaço restante é dividido pelo número total de unidades fr.

grid-template-columns: 200px 1fr 2fr;

Em um contêiner de 1000px, a primeira coluna ocupa 200px e os 800px restantes se dividem 1:2, ou seja, 267px e 533px.

auto-fill vs. auto-fit

• auto-fill: cria tracks vazias de preenchimento quando não há itens suficientes.
• auto-fit: colapsa as tracks vazias a zero, então os itens restantes se esticam para preencher a linha.

O fallback responsivo usa auto-fit, que é o que as grades de cards querem: a linha sempre parece cheia.

Colunas de larguras diferentes

O gerador emite colunas iguais. Edite o resultado para misturar tamanhos: grid-template-columns: 200px 1fr 2fr; dá uma barra lateral fixa e duas colunas flexíveis na proporção 1:2. Para áreas nomeadas (grid-template-areas) ou posicionamento explícito (grid-column: 1 / 3), adicione essas regras manualmente por cima do contêiner gerado.

Grid vs. Flexbox

• Grid: layout 2D explícito com tracks. Bom quando o layout tem estrutura de linhas e colunas (esqueleto de página, galeria, painel).
• Flexbox: alinhamento 1D ao longo de um único eixo. Bom quando os itens fluem naturalmente (barra de navegação, fileira de botões).

Layouts reais costumam combinar os dois: Grid para o esqueleto da página e Flexbox dentro dos componentes.

Erros comuns

• Esquecer min-width: 0 nos filhos: os itens da grade usam por padrão a largura mínima do conteúdo, o que impede as colunas fr de encolherem abaixo da palavra mais longa. Defina min-width: 0 nos filhos para deixá-los encolher.
• Aninhar sem display: grid: um filho da grade não é em si uma grade, a menos que você declare.