RelvCode Grid Designer - Gerador de Layout CSS Grid

Canvas de Desenho

Desenhe para criar seu grid

Modo:

Snap to Grid:

Configurações

Tipo de Grid

Colunas

Linhas

Dimensões do Container

Largura

Altura

Gaps

Gap Colunas

Gap Linhas

📏 Como Usar o Grid Designer

Réguas do Canvas: As réguas nas bordas do canvas mostram as dimensões em pixels. Elas ajudam a visualizar o tamanho e a posição exata de cada caixa que você desenha, facilitando o alinhamento e o planejamento do seu layout.

Balão de Medidas: Quando você começa a desenhar uma nova caixa, um pequeno balão aparece ao lado do cursor, exibindo as dimensões em tempo real:

L: Largura da caixa em pixels
A: Altura da caixa em pixels

Dica: Ao usar o modo "Snap to Grid", as caixas se alinham automaticamente à grade. Combine isso com o balão de medidas para criar layouts com espaçamento e proporções perfeitas, garantindo um design.

Ações Rápidas

Código CSS Gerado

/* Desenhe caixas no canvas para gerar o código CSS Grid */

Grid Designer

Canvas de Desenho

Editar Caixa

Código CSS Gerado

Código HTML Gerado