⚡Todas as ferramentas 💻Desenvolvimento e código 📝Texto e escrita 🎨Design e cores 🖼️Imagem e multimídia 🔢Matemática e cálculos 🔒Segurança e chaves 📄Ferramentas de PDF 📐Conversores de unidades

Gerador de layout CSS Flexbox e Grid

Configure e visualize layouts CSS Flexbox e Grid de forma visual, veja animações e copie o código CSS gerado.

Quantidade de elementos

Direção do fluxo (flex-direction)

Alinhamento principal (justify-content)

Alinhamento transversal (align-items)

Quebra de linha (flex-wrap)

Espaçamento (gap) 12px

Pré-visualização ao vivo Contêiner

Código CSS gerado

.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  gap: 12px;
}

Exemplo de HTML

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Como usar esta ferramenta

1 Abra Gerador de layout CSS Flexbox e Grid e insira, cole ou selecione o conteúdo que deseja processar.
2 Ajuste as opções e o formato de saída para sua tarefa.
3 Confira o resultado e copie ou baixe a saída disponível.

Usos comuns

Configure e visualize layouts CSS Flexbox e Grid de forma visual, veja animações e copie o código CSS gerado. Use no trabalho, desenvolvimento, estudo ou em verificações rápidas.

Privacidade e tratamento de dados

Esta ferramenta funciona no navegador. Antes de usar dados sensíveis, confirme que o dispositivo e o navegador são confiáveis.

Gerador de layout CSS Flexbox e Grid: ajuste visualmente e copie o código

Esta ferramenta permite montar layouts com Flexbox ou CSS Grid usando menus, sem precisar decorar a sintaxe. No topo você alterna entre Modo Flexbox e Modo CSS Grid, define de 1 a 12 elementos com os botões de mais e menos e escolhe as propriedades. A prévia aplica cada mudança na hora e, abaixo, aparecem o CSS do contêiner e a estrutura HTML correspondente, cada um com seu botão de copiar. A saída padrão é .container { display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch; flex-wrap: nowrap; gap: 12px; }

O modo Flexbox cobre flex-direction (row, row-reverse, column, column-reverse), justify-content no eixo principal (incluindo space-between, space-around e space-evenly), align-items no eixo transversal (incluindo stretch e baseline) e flex-wrap. Lembre que o eixo principal acompanha a direção: com flex-direction: column, justify-content passa a controlar a posição vertical e align-items a horizontal. Quando os elementos não cabem na largura, nowrap espreme tudo em uma linha e só wrap faz quebrar para a próxima.

O modo Grid traz modelos de colunas comuns: colunas iguais de repeat(2, 1fr) a repeat(4, 1fr), uma coluna central mais larga com 1fr 2fr 1fr e a versão responsiva repeat(auto-fit, minmax(100px, 1fr)), que coloca quantas colunas couberem na largura do contêiner. As linhas podem ser auto, repeat(2, 80px) ou 1fr 1fr, e justify-items e align-items posicionam cada elemento na horizontal e na vertical dentro da célula. Os dois modos compartilham o controle de espaçamento gap (0 a 40 px), que separa linhas e colunas ao mesmo tempo e deixa o código mais limpo do que pôr margem em cada elemento.

O código gerado traz apenas as regras de layout de .container e a estrutura HTML de .item; cores, tamanhos e espaçamento interno dos elementos ficam por sua conta, conforme o seu design. Uma regra prática: use Flexbox para arranjos em uma dimensão, como uma fileira de botões, um menu ou centralizar um elemento, e Grid para layouts em duas dimensões em que linhas e colunas precisam se alinhar, como murais de cards e dashboards. Tudo atualiza na hora no navegador, então experimente à vontade e observe o efeito de cada propriedade.

Perguntas frequentes

Devo usar Flexbox ou Grid?

Flexbox é para arranjos em uma dimensão, ao longo de uma linha ou coluna: menus, grupos de botões ou centralizar algo. Grid é para layouts em duas dimensões em que linhas e colunas precisam se alinhar, como listas de cards ou a estrutura da página. Os dois combinam bem: Grid para o esqueleto e Flexbox dentro de cada componente.