Gerador de Grade CSS

Construa um layout de grade CSS visualmente — definir colunas, linhas, lacunas e dimensionamento de faixas e, em seguida, copie o CSS gerado.

How to use CSS Grid Generator

1. Define o número de colunas e linhas para a grade.
2. Escolha uma unidade de dimensionamento de faixas como fr, px, auto, ou minmax.
3. Ajuste a coluna-gap e linha-gap, além de itens de justificação e itens de alinhamento.
4. Copie a grade gerada CSS e cole-a em seu projeto.

O que é {nome}?

FAQ

O que significa a unidade f no dimensionamento de trilhos?

A unidade fr representa uma fração do espaço livre no recipiente da grade. Usando repeat(3, 1fr) cria três colunas de largura igual que compartilham o espaço disponível, expandindo e encolhendo responsivamente à medida que o recipiente redimensiona.

Quando devo usar minmax() em vez de fr?

Use minmax () quando as faixas precisam de um piso e teto, como minmax(80px, 1fr), que mantém uma coluna de pelo menos 80px de largura, mas permite que ela cresça para preencher espaço. Fr simples não tem mínimo e pode encolher abaixo larguras legíveis em telas pequenas.

Related tools

• Flexbox Generator
• CSS Gradient Generator
• Border Radius Generator
• Box Shadow Generator