ToolPilot
Design

Gerador de CSS Grid

Crie uma grelha CSS com colunas, linhas, espaçamentos e alinhamento personalizados, com código em tempo real.

Crie protótipos de layouts sem escrever os valores de grid-template à mão. Defina as colunas e linhas, o espaçamento e o alinhamento e depois copie o CSS.

Carregando a ferramenta…
Privacidade: Um utilitário ToolPilot rápido e privado. Seus dados são processados localmente no seu navegador sempre que possível.

Como

  1. 1Defina o número de colunas e linhas.
  2. 2Ajuste os tamanhos das faixas, os espaçamentos e o alinhamento.
  3. 3Copie o CSS da grelha.

Perguntas frequentes

Gera grelhas responsivas?

Gera a grelha base. Adicione uma media query ou use auto-fit com minmax para responsividade.

Os meus ficheiros são enviados para um servidor?

Não. Esta ferramenta funciona inteiramente no seu navegador com JavaScript e WebAssembly quando necessário. Os seus ficheiros e textos nunca saem do seu dispositivo.

Ajude-nos a melhorar

Melhoramos nossas ferramentas regularmente. Encontrou um problema ou tem uma sugestão? Estamos ouvindo.

Ferramentas relacionadas

🎨

Seletor de cores + HEX/RGB/HSL

🎯

Conversor HEX / RGB / HSL

🌈

Gerador de paletas

🌊

Gerador de gradientes CSS