Gerador de grade CSS – Layout de grade visual online

Columns:

Rows:

Gap:

CSS

Share X / Twitter Facebook LinkedIn WhatsApp

Como usar Gerador de grade CSS

Definir colunas e linhas — contagem e tamanhos (fr para flexível, px para fixo).
Ajustar o espaço — o espaçamento integrado da grade entre todas as trilhas.
Visualizar a estrutura — os itens preenchem as células na ordem de origem.
Copie o CSS do contêiner — e adicione regras de extensão por item para células que devem ser estendidas.

O que é Gerador de grade CSS?

Um gerador de grade CSS cria layouts bidimensionais visualmente: escolha contagens de colunas e linhas, dimensione-as (a unidade fr, pixels fixos ou combinações), defina a lacuna, visualize o resultado e copie a grade display:; grid-template-columns:… CSS.

Grid é o sistema CSS para layouts que se alinham em ambas as dimensões - andaimes de página, painéis, galerias de imagens, layouts de formulário. Sua sintaxe é compacta, mas abstrata (grid-template-columns: 250px 1fr 1fr descreve uma barra lateral mais duas colunas em cinco tokens); o gerador torna a abstração visível antes de você enviá-la para uma folha de estilo.

Sobre o Gerador de grade CSS

Defina suas colunas e linhas, dimensione as trilhas, ajuste a lacuna e copie o CSS gerado para o contêiner.

Fluência de dimensionamento de trilhas, rapidamente: 1fr 1fr 1fr são três colunas flexíveis iguais; 250px 1fr é o shell clássico de conteúdo fluido da barra lateral fixa; repeat(3, 1fr) abrevia trilhas iguais; e a joia da coroa repeat(auto-fit, minmax(250px, 1fr)) cria uma grade de cartão responsiva — quantas colunas ≥250px cabem, sem consultas de mídia — a única receita de grade mais copiada existente.

A biblioteca de padrões que ela acelera: galerias de fotos (grades de ajuste automático), painéis de painel (áreas explícitas), formulários com colunas de rótulo/campo alinhadas e o shell da página do Santo Graal (cabeçalho abrangendo todos colunas, barra lateral, principal, rodapé) que os sistemas de layout perseguiram por duas décadas e o Grid despacha em seis linhas. Os itens são colocados automaticamente na ordem de origem; spanning (um item que cobre várias trilhas) adiciona grid-column: span 2 por item.

Perguntas Frequentes

Uma fração do espaço livre: 1fr 2fr divide a largura restante em um terço/dois terços após a colocação dos trilhos fixos. É a unidade flexível nativa do Grid – prefira-a às porcentagens, que ignoram as lacunas.

A grade responsiva de uma linha: ajuste quantas colunas de pelo menos 250px o contêiner permitir, estique-as igualmente, reflua ao redimensionar - layouts de cartão sem uma única consulta de mídia.

No item: grid-column: span 2 (ou linhas explícitas: grid-column: 1/3). As linhas funcionam da mesma forma com a linha da grade. Spanning é CSS por item na parte superior do modelo de contêiner.

Grade quando os cartões devem ser alinhados em linhas e colunas estritas (alturas iguais, estrutura limpa); flexbox com envoltório quando os cartões podem ser dimensionados de forma independente. A receita de ajuste automático tornou o Grid a resposta padrão para galerias.

exibição: grade; colunas de modelo de grade: 250px 1fr; gap: 24px – barra lateral fixa, principal fluido. Adicione grid-template-rows e um cabeçalho abrangendo ambas as colunas (grid-column: 1/-1) para o shell de página inteira.