Gerador de CSS Grid

Desenhe um CSS grid visualmente — defina colunas, linhas, espaçamentos e células mescladas, depois copie o CSS de grid-template. Tudo roda no seu navegador.

O Gerador de CSS Grid roda inteiramente no seu navegador. As colunas, linhas, tamanhos de faixa, espaçamentos e células mescladas que você configura nunca saem do seu dispositivo e nada é enviado à ArrayKit.

Abrir o Formatador CSS

Sobre Gerador de CSS Grid

O Gerador de CSS Grid permite montar um layout de grid a olho e copiar o CSS exato que ele produz. Escolha uma quantidade de colunas e linhas, dimensione cada faixa com unidades fr, pixels, porcentagens, auto ou minmax(), e defina o espaçamento. Uma prévia ao vivo mostra a grade; clique em duas células para mesclá-las em uma região abrangida e a ferramenta escreve as regras grid-column e grid-row correspondentes para você. Sequências de três ou mais faixas idênticas colapsam em repeat() para que a saída fique limpa, e você pode renomear o seletor para combinar com a sua própria classe. É feito para desenvolvedores front-end montando cards, dashboards e estruturas de página que querem um CSS de grid-template correto sem precisar contar linhas à mão. O editor roda inteiramente no seu navegador, então nada que você digita é enviado.

Recursos

Como usar Gerador de CSS Grid

  1. Escolha quantas colunas e linhas seu layout precisa
  2. Dimensione cada faixa com fr, px, %, auto ou minmax()
  3. Defina o espaçamento, e um espaçamento de coluna se ele deve diferir
  4. Clique em duas células na prévia para mesclar uma região abrangida
  5. Copie o CSS gerado para a sua folha de estilos

Exemplo

Entrada

columns: 200px 1fr 1fr 1fr
rows: auto
gap: 20
merge: cols 2-4

Saída

.grid {
  display: grid;
  grid-template-columns: 200px repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 20px;
}

.grid > :nth-child(1) {
  grid-column: 2 / span 3;
  grid-row: 1;
}

Três colunas iguais colapsam em repeat(3, 1fr) e as células mescladas abrangem três faixas.

Erros comuns e solução de problemas

Perguntas frequentes

O que o Gerador de CSS Grid gera?
Ele produz uma regra de contêiner com display: grid, grid-template-columns, grid-template-rows e gap, além de uma regra grid-column / grid-row para cada região mesclada que você cria. Você copia o bloco inteiro para a sua folha de estilos.
Quando minhas faixas colapsam em repeat()?
Três ou mais faixas idênticas e adjacentes se dobram em repeat(n, valor). Uma ou duas seguidas permanecem escritas por extenso, já que repeat() só encurta a saída a partir de três faixas. Sequências mistas intercalam faixas literais e grupos repeat().
Como mesclo células para abranger várias colunas ou linhas?
Clique em uma célula na prévia, depois clique em uma segunda célula. A ferramenta seleciona o retângulo entre elas e escreve grid-column e grid-row com a linha inicial e o trecho certos. Clique num bloco mesclado de novo para dividi-lo de volta em células únicas.
Posso usar minmax(), auto e porcentagens para os tamanhos de faixa?
Sim. Cada faixa aceita um valor fr, um comprimento em pixels, uma porcentagem, auto, ou minmax(min, max). Números soltos são tratados como fr, e o espaçamento em minmax() é normalizado para que o CSS copiado fique consistente.
Por que a regra gerada usa um seletor :nth-child()?
Regiões mescladas são posicionadas por posição, então a ferramenta mira os filhos do grid na ordem do código com :nth-child(). Renomeie o seletor do contêiner para a sua própria classe, e as regras de posicionamento o acompanham automaticamente.
O grid que eu desenho é enviado para algum lugar?
Não. O Gerador de CSS Grid monta o CSS de template e posicionamento inteiramente no seu navegador. As colunas, linhas, espaçamentos e células mescladas que você define nunca saem do seu dispositivo e não são enviados à ArrayKit.

Ferramentas relacionadas

Todas as ferramentas de ArrayKit