Ferramentas para desenvolvedores
Gerador de CSS Grid
Gere código CSS Grid personalizado com configuração flexível de colunas, linhas e espaçamentos em pixéis.
Executar ferramenta
Este gerador cria declarações de CSS Grid prontas a aplicar no desenvolvimento de interfaces web e esquemas de páginas. Permite configurar a estrutura do contentor através da definição de colunas, linhas e espaçamentos entre eles. Ao introduzir um número inteiro no campo de colunas, a ferramenta aplica automaticamente a sintaxe de repetição com unidades fracionárias. Se preferir medidas específicas, pode introduzir sequências personalizadas como píxeis ou frações mistas. O campo de linhas aceita a definição automática padrão, repetições numéricas ou texto descritivo. Os controlos de espaçamento geral, entre colunas e entre linhas convertem valores numéricos diretamente em pixéis no código gerado, omitindo as propriedades cujo valor seja zero. O painel final apresenta a propriedade de grelha juntamente com os modelos de colunas e linhas configurados, simplificando a composição de layouts modernos para a sua folha de estilos.
Instruções
- Defina o número de colunas ou escreva uma sequência de medidas personalizada como 200px 1fr.
- Indique a configuração de linhas com um número, o valor auto ou texto descritivo.
- Ajuste o espaçamento geral entre os elementos da grelha em pixéis.
- Se pretender distâncias distintas, preencha os campos específicos de espaçamento de coluna e de linha.
- Copie o código CSS gerado diretamente para a sua folha de estilos.
Exemplos
- Grelha com 3 colunas e espaçamento de 10 píxeis: gera display: grid, grid-template-columns: repeat(3, 1fr), grid-template-rows: auto e gap: 10px.
- Estrutura com colunas personalizadas 200px 1fr, 2 linhas e espaçamento entre colunas de 16 píxeis: gera display: grid, grid-template-columns: 200px 1fr, grid-template-rows: repeat(2, auto) e column-gap: 16px.
Perguntas frequentes
Como funciona a conversão do número de colunas?
Quando introduzir apenas dígitos no campo de colunas, a ferramenta converte esse valor na função repeat(N, 1fr). Se introduzir texto com unidades mistas, o texto original é preservado.
Que unidades são aplicadas aos espaçamentos?
Os campos de espaçamento atribuem automaticamente a unidade px aos valores numéricos indicados.
O que acontece se definir um espaçamento como 0?
Quando um valor de espaçamento é definido como 0, a respetiva declaração CSS é omitida do código final para manter as regras organizadas.