Qual é a diferença entre CSS Columns e Flexbox neste gerador?

CSS Columns cria um fluxo vertical contínuo, ideal para o verdadeiro efeito masonry. Flexbox organiza os itens em linhas, oferecendo um controle mais previsível da largura, mas com alinhamento horizontal.

Preciso usar JavaScript para fazer o layout funcionar?

Não. O código gerado utiliza apenas CSS puro (HTML e CSS), garantindo melhor performance e facilidade de manutenção.

Como configuro os breakpoints responsivos?

Insira uma regra por linha no formato 'largura:colunas', por exemplo, '768:2' para exibir duas colunas quando a tela atingir 768px.

O que são os elementos ignorados (skip elements)?

São classes ou seletores (como '.destaque') que você define para quebrar o fluxo do masonry, fazendo com que o elemento ocupe 100% da largura do container.

Posso usar unidades relativas como rem ou %?

Sim. Os campos de largura do container e espaçamento aceitam qualquer unidade CSS válida, como px, rem, em ou %.

Elysia Tools

Navegação

Development

Gerador de layout masonry CSS

Gera layouts masonry em CSS puro com breakpoints, espacamento configuravel e seletores ignorados

Detalhes

O que esta ferramenta ajuda você a fazer

Informe colunas, largura do container, espacamento e breakpoints, depois escolha entre CSS columns ou Flexbox. A ferramenta entrega HTML e CSS prontos para copiar.

O resultado inclui:

estrutura HTML base
CSS comentado
resumo de breakpoints e seletores ignorados

Execução

Executar esta ferramenta

Preencha o formulário, execute a ferramenta e veja o resultado no mesmo lugar.

Resultado

Pronto para executar

Depois de executar, arquivos, texto, dados estruturados ou saída em streaming aparecerão aqui.

Exemplos

Exemplos compatíveis com esta ferramenta

Relacionado

Gerador de layout masonry CSS

O que esta ferramenta ajuda você a fazer

Executar esta ferramenta

Execuções de exemplo preparadas

Entradas

Resultado

Exemplos compatíveis com esta ferramenta

Continue com ferramentas e temas relacionados

Execuções de exemplo preparadas

Entradas

Resultado

Veja quando usar esta ferramenta, o que ela suporta e como os usuários a aplicam.

Fatos principais

Visão geral

Quando usar

Como funciona

Casos de uso

Exemplos

1. Galeria de fotos responsiva

2. Feed de blog com posts em destaque

Perguntas frequentes

Exemplos do Framework CSS Bulma

Amostras CSS

Exemplos do Framework CSS Milligram

Tailwind CSS Samples

Conversor de cURL para Go (net/http)

Conversor de cURL para JavaScript (axios)

Conversor de cURL para JavaScript (fetch)

Conversor de cURL para PHP (cURL)

Geradores de schema JSON, dados mock e fixtures de API

Geradores de efeitos CSS, paletas e tokens de design

Geradores de layout e modelos PDF imprimiveis

Ferramentas para gerar previews, tons e efeitos de audio