Gerador de CSS Grid

Crie grades com colunas, linhas, gap e áreas nomeadas com pré-visualização instantânea.

Layout

 estilo.css

display: grid

Cria um contexto bidimensional de layout, permitindo posicionar itens em linhas e colunas explícitas.

grid-template-columns

Define o número e o tamanho das colunas — aqui geramos repeat(N, 1fr) para N colunas de largura igual.

gap

Espaçamento uniforme entre linhas e colunas do grid, sem afetar as bordas externas do container.

Perguntas frequentes

O que significa 1fr?

'fr' é uma unidade de fração do espaço disponível no grid — 1fr divide o espaço restante em partes iguais entre as colunas.

Como criar colunas de tamanhos diferentes?

Substitua repeat(N, 1fr) por uma lista explícita, como '2fr 1fr 1fr', dando peso maior à primeira coluna.

Grid substitui completamente o Flexbox?

Não — eles se complementam. É comum usar Grid na estrutura geral da página e Flexbox dentro de componentes internos.