Categoria: Desenvolvimento
Gerador de Grid CSS
Construa um layout grid-template e copie o CSS
Defina o número de colunas e linhas e o espaçamento em uma pré-visualização de grade ao vivo, opcionalmente trocando as colunas por uma trilha minmax() para que possam encolher antes de quebrar, depois copie a declaração final do contêiner. Nada aqui sai do seu navegador.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
gap: 12px;
}Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
grid-template-columns: repeat(n, 1fr) gera colunas iguais que nunca encolhem além do seu conteúdo, o que causa transbordamento em telas estreitas. Trocar para minmax(min, 1fr) permite que cada coluna encolha até um piso antes de a grade desistir e quebrar — a diferença entre um layout que funciona bem em um celular e um que não funciona. Esta ferramenta constrói as duas formas a partir dos mesmos controles, para que a diferença fique visível em uma grade real, não apenas na declaração.
Como usar
- Defina o número de colunas e linhas.
- Defina o espaçamento entre as células.
- Ative colunas com minmax() se quiser que encolham em telas estreitas, depois copie o CSS.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- A pré-visualização é uma grade CSS real?
- Sim. As células numeradas são organizadas com o grid-template-columns e o grid-template-rows exatos que você está definindo.
- O que o minmax() realmente muda?
- Sem ele, colunas repeat(n, 1fr) permanecem iguais, mas nunca encolhem além do seu conteúdo, então um contêiner estreito simplesmente transborda. minmax(min, 1fr) permite que cada coluna encolha até o mínimo antes de o navegador procurar outra forma de encaixá-las.
- Algo é enviado?
- Não. A declaração é um texto construído a partir dos controles que você define, e a grade de pré-visualização é renderizada localmente na página.