Monte grid-template-columns e rows visualmente, posicione itens e copie o CSS ou Tailwind prontos.
`grid-template-columns` e `grid-template-rows` definem o tamanho de cada trilha do container. A unidade `fr` distribui o espaço restante proporcionalmente depois que os tamanhos fixos (px, %) já foram reservados, por isso `1fr 1fr 1fr` cria três colunas iguais que se adaptam à largura disponível. A função `minmax(min, max)` trava um piso e um teto para uma trilha, muito usada com `repeat(auto-fit, minmax(220px, 1fr))` para criar grids responsivos sem nenhuma media query: o navegador calcula sozinho quantas colunas cabem. Cada item é posicionado com `grid-column` e `grid-row`, que aceitam a notação `linha-inicial / linha-final`, as linhas de grade são numeradas a partir de 1, não os espaços entre elas. `auto-fit` colapsa trilhas vazias, `auto-fill` mantém o espaço reservado mesmo sem conteúdo, a diferença só aparece quando há menos itens do que colunas cabíveis.
Cole o código no seu HTML e a ferramenta aparece na sua página, sem a navegação e sem os anúncios do J-Kit. Ela continua rodando no navegador de quem visita o seu site.
<iframe
src="https://jkit.tools/embed/pt-BR/gerador-grid-css"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Gerador de CSS Grid"
></iframe>Estas referências ajudam a contextualizar fórmulas, padrões, APIs e limitações usadas nesta página. Elas não substituem validação profissional quando o resultado tiver impacto jurídico, financeiro, médico ou operacional.
Porcentagem calcula sobre a largura total do container. `fr` distribui o espaço que sobra depois de reservar as trilhas de tamanho fixo (px, minmax mínimo), por isso `1fr 200px` deixa a primeira coluna ocupar tudo que não foi usado pelos 200px, algo que porcentagem sozinha não consegue expressar.
Clique em um item para selecioná-lo, arraste para mover ou use a alça no canto para redimensionar.
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}O CSS é gerado localmente no navegador.