Como gerar uma grelha CSS Grid com colunas, linhas e espaçamento

Introduza as colunas, linhas e espaçamentos pretendidos para gerar código CSS Grid. Valores numéricos de colunas e linhas recebem a notação repeat, enquanto os espaçamentos preenchidos são emitidos em pixels.

Para que serve o gerador de CSS Grid

O CSS Grid Generator cria código CSS para uma grelha CSS Grid a partir de definições opcionais de colunas, linhas e espaçamentos. É útil quando pretende obter rapidamente uma estrutura inicial para organizar elementos numa grelha, sem escrever manualmente as declarações de modelo de colunas e linhas.

Pode começar com os valores predefinidos ou substituir cada entrada por uma contagem numérica ou por texto CSS personalizado. As colunas e as linhas são interpretadas como texto antes de serem transformadas, pelo que uma entrada numérica como 3 é aceite. O resultado inclui uma declaração display: grid e declarações separadas para o modelo de colunas e de linhas.

Como gerar o código passo a passo

1. Introduza a quantidade de colunas ou o texto que pretende usar no modelo de colunas. Um valor composto apenas por algarismos, como 3, é convertido para a notação repeat(3, 1fr). Se escrever texto como 200px 1fr, esse texto é mantido no modelo de colunas.

2. Defina as linhas. Um número composto apenas por algarismos, diferente de auto, é convertido para uma repetição com esse número de linhas e o tamanho auto. Pode também deixar auto ou introduzir outro texto de linhas; nesses casos, o texto é mantido.

3. Preencha o espaçamento geral, se necessário. Um valor com conteúdo é emitido em pixels, por exemplo, 10 dá origem a gap: 10px. Se o valor for vazio ou tiver valor considerado falso, a declaração geral de espaçamento não é incluída.

4. Se precisar de controlo separado, defina o espaçamento entre colunas e o espaçamento entre linhas. Cada valor preenchido é emitido com a unidade px, enquanto um valor vazio ou considerado falso omite a respetiva declaração.

5. Reveja os valores introduzidos e utilize o resultado gerado. Para começar sem personalização, pode aceitar as predefinições: 3 colunas, linhas auto, espaçamento geral de 10, espaçamento entre colunas de 0 e espaçamento entre linhas de 0. Os valores zero individuais não produzem as respetivas declarações de espaçamento.

Como interpretar o resultado

Leia o resultado como um conjunto de declarações CSS para um contentor de grelha. A presença de display: grid indica o modo de apresentação da grelha. A declaração do modelo de colunas descreve a distribuição horizontal: uma contagem numérica usa repeat com 1fr, enquanto um modelo personalizado, como 1fr 1fr 1fr, permanece com o texto introduzido. A declaração do modelo de linhas segue a mesma lógica: uma contagem numérica usa repeat com auto, e auto ou outro texto é mantido.

Os espaçamentos são independentes. Um espaçamento geral preenchido aparece como gap em pixels; os espaçamentos específicos aparecem como column-gap ou row-gap, também em pixels. Quando um desses valores não é emitido, isso significa que a entrada correspondente foi vazia ou considerada falsa, não que tenha sido aplicado outro valor de unidade.

Use texto personalizado apenas quando já souber o modelo CSS que pretende obter. O gerador transforma especificamente os valores compostos apenas por algarismos; os restantes textos são mantidos, por isso o resultado deve ser revisto antes de ser integrado no seu estilo.

Exemplo prático

Está a preparar uma área com três colunas de largura equivalente e linhas automáticas.

Numa situação em que precisa de três colunas com linhas automáticas e 16 de espaçamento geral, introduza 3 nas colunas, auto nas linhas e 16 no espaçamento geral; depois reveja o CSS produzido.

O resultado contém display: grid, um modelo de colunas com repeat(3, 1fr), um modelo de linhas auto e uma declaração gap: 16px.

Limitações

• A transformação documentada aplica-se a valores de colunas ou linhas compostos apenas por algarismos; os restantes textos são mantidos. Os espaçamentos preenchidos são emitidos em px, e não com uma unidade escolhida no campo.

Erros comuns

• Introduzir 16px num campo de espaçamento esperando que a ferramenta escolha a unidade pode produzir uma declaração com px acrescentado ao valor. Utilize valores numéricos para os espaçamentos e confirme o CSS gerado, porque os valores preenchidos são emitidos em pixels e os valores vazios ou considerados falsos são omitidos.

Perguntas frequentes

Como definir várias colunas no CSS Grid Generator?

Quando introduz um número composto apenas por algarismos, o valor das colunas é convertido para repeat(n, 1fr), em que n corresponde ao número introduzido. Texto como 200px 1fr é mantido.

Como definir linhas automáticas?

Se o valor das linhas for um número composto apenas por algarismos e diferente de auto, é usada a notação repeat(n, auto). O valor auto e outro texto de linhas são mantidos.

Posso definir o espaçamento entre colunas e linhas separadamente?

Os valores de espaçamento preenchidos são emitidos com a unidade px. O espaçamento geral gera gap, e os valores separados geram column-gap ou row-gap; entradas vazias ou consideradas falsas omitem a declaração correspondente.