Gerador Visual de CSS

Crie layouts CSS Grid e Flexbox de forma interativa.

Criado por: Prof. Esp. Leandro Gaudio Rosa

Configurações do Container

Colunas

Linhas

Gap (px)

Itens do Grid

Clique em um `+` no grid para adicionar, arraste para mover, ou use a alça para redimensionar.

Visualização

HTML

CSS

Configurações do Container

row

row-reverse

column

column-reverse

flex-start

center

flex-end

between

around

evenly

stretch

flex-start

center

flex-end

baseline

nowrap

wrap

wrap-reverse

flex-start

center

flex-end

between

around

stretch

Requer 'flex-wrap: wrap'.

gap (px)

Itens (Filhos)

Clique em um item na visualização para selecioná-lo e editar. Se nenhum for selecionado, 'Remover' remove o último.

Visualização

HTML

CSS