Gerador de CSS Grid

Loading CSS Grid Editor...

O que é CSS Grid?

CSS Grid Layout é o sistema de layout mais poderoso disponível em CSS. É um sistema bidimensional, capaz de lidar com colunas e linhas, diferente do flexbox que é principalmente unidimensional.

Como usar este Gerador de CSS Grid

1

Definir dimensões

Use os controles laterais para definir colunas, linhas e espaçamentos.

2

Definir áreas

Clique e arraste na pré-visualização para selecionar regiões retangulares.

3

Personalizar unidades

Ajuste os tamanhos de colunas e linhas usando os campos de entrada.

4

Experimentar modelo

Escolha layouts pré-construídos como Holy Grail, Blog ou Dashboard.

5

Gerar código

Clique em "Gerar Código" para exportar CSS e HTML prontos para uso.

css grid

Guia de Sintaxe CSS Grid

A sintaxe principal do CSS Grid envolve propriedades como grid-template-columns, grid-template-rows e grid-gap. Usar unidades fracionárias (fr) permite criar layouts flexíveis que se ajustam perfeitamente ao tamanho da tela (viewport).

Exemplos de Layout CSS Grid

Exemplos comuns incluem o layout 'Holy Grail' (cabeçalho, barra lateral, conteúdo principal, rodapé). Com grid-template-areas, você pode definir essas regiões usando nomes intuitivos, tornando seu código muito mais limpo.

Perguntas Frequentes

O que é CSS Grid?
CSS Grid é um sistema de layout bidimensional para a web que permite criar layouts complexos e responsivos com linhas e colunas.
Como uso este gerador?
Defina colunas e linhas, ajuste espaçamentos, clique e arraste. Clique em "Gerar Código" para obter o código.
Que unidades posso usar?
CSS Grid suporta fr, px, %, auto, min-content, max-content e funções minmax().
O que é grid-template-areas?
Uma propriedade CSS que permite definir regiões de grade nomeadas com sintaxe tipo ASCII-art.
Posso exportar meu layout?
Sim! Clique em "Gerar Código" para ver seu layout como código CSS e HTML limpo.
Esta ferramenta é gratuita?
Sim, este gerador é completamente gratuito. Nenhum cadastro necessário.