Laboratório visual de CSS Flexbox e Grid

Ajuste propriedades de Flexbox e CSS Grid em uma prévia interativa, adicione itens e copie o código do layout criado

Gerador visual de layout com simulação de telas e controles por item.

flex-direction:

flex-wrap:

justify-content (alinhamento no eixo principal):

align-items (alinhamento no eixo transversal):

align-content (alinhamento de várias linhas):

gap (espaço entre itens): 14px

Quantidade de itens: 6

Gerencie os itens sem ultrapassar os limites da área de visualização.

Simulação de telas:

Prévia interativa do layout

Largura: 100% (fluida)

CSS pronto para usar

/* Ajuste as propriedades para gerar o código CSS */

Sobre esta ferramenta

Ajuste propriedades de Flexbox e CSS Grid em uma prévia interativa, adicione itens e copie o código do layout criado.

Teste alinhamento, espaçamento e quebra em telas pequenas. Um layout visualmente correto pode precisar de HTML semântico e ajustes de acessibilidade.