Gerador de Layout Flexbox/Grid | Gerador Visual de Layout CSS

📐

Gere código de layout Flexbox e CSS Grid intuitivamente usando uma GUI.
Ajuste propriedades enquanto visualiza em tempo real e exporte o CSS instantaneamente.

⚠️ O JavaScript deve estar ativado para usar esta ferramenta.

auto_awesome Predefinições

settings_suggest Gerador

flex-direction

flex-wrap

justify-content

align-items

align-content

gap

visibility 📐 Pré-visualização Visual Arraste a borda inferior tracejada para alterar a altura

code CSS Gerado

about,

📖 Sobre

Uma ferramenta online para criar layouts CSS Flexbox e Grid intuitivamente através de uma GUI. Projete layouts complexos visualmente arrastando e soltando ou ajustando parâmetros.

Suporta tanto Flexbox (justify-content, align-items, flex-wrap) quanto CSS Grid (grid-template-columns, gap). Ajuste as propriedades enquanto observa as mudanças na pré-visualização em tempo real.

Todo o processamento é feito no seu navegador, sem envio de dados para servidores.

howto,

🔰 Como Usar

Selecionar modo de layout

Selecione "Flexbox" ou "CSS Grid" nas abas superiores. Você também pode começar com uma predefinição.

Ajustar propriedades

Modifique as configurações do contêiner e detalhes dos itens para ver como o layout muda no painel de pré-visualização.

Copiar o código

Copie o código CSS e HTML gerado para o seu projeto web.

glossary,

📚 Glossário

Flexbox: Módulo de layout CSS3. Ideal para posicionamento unidimensional (linha ou coluna), muito usado em navegações e listas de cartões.
CSS Grid: Módulo de layout bidimensional CSS3. Poderoso para estruturar layouts completos de páginas.
justify-content: Propriedade para controlar o alinhamento dos itens ao longo do eixo principal.
align-items: Propriedade para controlar o alinhamento no eixo transversal.

faq,

❓ FAQ

Q. Flexbox vs Grid?: A. Em geral, use Flexbox para layouts unidimensionais (apenas linha ou coluna) e Grid para layouts bidimensionais. Usar Flexbox dentro de componentes e Grid para o layout geral da página é um padrão comum.
Q. Responsivo?: A. Não gera media queries diretamente (@media), mas você pode obter designs responsivos básicos usando `flex-wrap` ou o `repeat(auto-fit, minmax(...))` do Grid.
Q. IE11?: A. Como gera CSS moderno, alguns recursos (especialmente Grid e gap) podem não funcionar corretamente no IE11.

scenes,

💡 Casos de Uso

🎨

Prototipagem de Design Web

Crie e exporte layouts completos como cabeçalhos, rodapés e barras laterais rapidamente com a GUI.

⚡

Prototipagem Rápida

Prepare layouts de CSS base nas fases iniciais do design para acelerar o desenvolvimento.

📚

Ferramenta de Aprendizado de CSS

Aprenda visualmente como diferentes propriedades do Flexbox e do Grid afetam os layouts em tempo real.

Ferramentas Relacionadas

Geradores CSSVer todas

☁️

Gerador de Box-Shadow

Cria intuitivamente belas sombras multicamadas

🎞️

Gerador de Animações CSS

Gera animações @keyframes graficamente

⬜

Gerador de Border Radius CSS

Ajusta 8 valores de border-radius visualmente e copia o código CSS

✨

Gerador de UI Moderna

Gera código de UI bonito (suporta Glassmorphism)

🖼️

Gerador de Fundos SVG

Cria padrões de fundo SVG leves

🔺

Gerador de Triângulos CSS

Gera triângulos CSS usando border, copie o código instantaneamente

🔤

Pré-visualização de Tipografia

Pré-visualiza tipografia CSS em tempo real

🎨

Pesquisa de Ícones SVG

Pesquisa ícones Lucide e Heroicons e copia o código SVG

Todas as Categorias

Ferramentas para Desenvolvedores Geradores CSS Ferramentas de Imagem e Foto Ferramentas de Vídeo e Áudio Redes e Infraestrutura Análise e Processamento de Texto Ferramentas de Finanças e Salário Ferramentas de Data e Calendário Ferramentas de Documentos e Negócios Jogos e Eventos Vida e Saúde Página Inicial

Enviar feedback

Deixe-nos saber sua opinião para nos ajudar a melhorar a ferramenta.