Escolha trilhas auto-fit ou um número fixo de colunas e ajuste largura mínima, espaçamento, alinhamento e quantidade de itens: a prévia é uma grade real e o painel de saída traz a regra completa que você colaria, de grid-template-columns a gap, align-items e justify-items.
Funciona localmente no seu navegadorEscolha colunas fixas ou uma trilha auto-fit, ajuste a largura mínima do cartão, o espaçamento e a quantidade de itens: a prévia é um CSS Grid de verdade e o painel de saída mostra a regra que você colaria (display: grid, grid-template-columns, gap, align-items e justify-items).
Os números desta página foram medidos, não copiados da especificação. O padrão é auto-fit com mínimo de 180 px, espaçamento de 16 px e 8 itens; com a janela em 1360 px a prévia mede 494 px e a mesma grade virou 2 trilhas com 180 px, 5 com 80 px e 1 com 600 px.
auto-fit escreve repeat(auto-fit, minmax(min(100%, 180px), 1fr)) — a proteção min(100%, …) impede que uma trilha estoure um contêiner mais estreito que o mínimo — e o modo fixo escreve repeat(4, minmax(0, 1fr)). A exportação também inclui display: grid, gap, align-items e justify-items, ou seja, uma regra completa.
A largura mínima decide o número de colunas: medido na prévia de 494 px, 180 px deram 2 trilhas, 80 px deram 5 e 600 px deixaram uma só. O espaçamento é um valor único para linhas e colunas.
Os quatro campos têm limites fixos: colunas 1-12, largura mínima 80-600 px, espaçamento 0-96 px, itens 1-24. Digitar 20 colunas desenhava 12 trilhas enquanto o campo continuava mostrando 20; agora o campo se ajusta para 12 ao confirmar, e 9999 → 600 px, 200 → 96 px e 30 → 24 itens seguem a mesma regra.
Valores vazios, não numéricos e decimais também entram na faixa: 3.7 vira 4, -5 vira 1 e um campo apagado volta ao mínimo permitido. Enquanto você digita, a prévia continua acompanhando o valor, mas o campo não é alterado.
Ele escreve uma regra de contêiner e um bloco de itens de exemplo, e só: não há áreas nomeadas (grid-template-areas), posicionamento por item (span, row/column), auto-rows nem empacotamento denso, e as classes .grid / .grid__item são um esqueleto para renomear.
Tudo roda na página: enquanto os controles eram usados e o código copiado, o navegador não fez nenhuma requisição. O mesmo script também serve a outros quatro geradores (bezier, clamp, blurhash, gradient) e essas páginas ficaram idênticas; a de grid não estoura na horizontal em 320, 390, 768 e 1360 px.