Fatos principais
- Categoria
- Desenvolvimento e Web
- Tipos de entrada
- number, text, select, textarea
- Tipo de saída
- text
- Cobertura de amostras
- 4
- API disponível
- Yes
Visão geral
O Gerador de layout masonry CSS é uma ferramenta prática para desenvolvedores front-end que precisam criar layouts em estilo cascata (waterfall) sem depender de bibliotecas JavaScript pesadas. Com suporte a CSS Columns ou Flexbox, você pode configurar o número de colunas, a largura do container, o espaçamento entre os itens e definir breakpoints responsivos personalizados. Além disso, permite isolar elementos específicos para que ocupem a largura total, entregando um código HTML e CSS limpo, comentado e pronto para ser copiado para o seu projeto.
Quando usar
- •Quando precisar criar galerias de imagens ou portfólios com itens de alturas variadas sem usar JavaScript.
- •Ao desenvolver interfaces responsivas que exigem adaptação dinâmica do número de colunas conforme o tamanho da tela.
- •Para implementar layouts de cards estilo Pinterest onde elementos em destaque precisam quebrar o fluxo padrão e ocupar a largura total.
Como funciona
- •Defina a estrutura básica informando o número máximo de colunas, a largura do container e o espaçamento (gap) entre os itens.
- •Escolha o motor de layout desejado: CSS Columns para um efeito cascata clássico ou Flexbox para um alinhamento em linhas.
- •Adicione regras de breakpoints responsivos (ex: 640:2 para 2 colunas em telas de 640px) e seletores de elementos que devem ser ignorados na grade.
- •Copie o código HTML e CSS gerado automaticamente, que já inclui os media queries e as classes necessárias para o seu projeto.
Casos de uso
Exemplos
1. Galeria de fotos responsiva
Desenvolvedor Front-end- Contexto
- Precisa montar uma galeria de imagens estilo Pinterest para o portfólio de um fotógrafo, suportando mobile e desktop.
- Problema
- Criar um layout em cascata que se adapte a diferentes telas sem usar plugins JS.
- Como usar
- Defina 4 colunas, gap de 16px, escolha 'CSS Columns' e adicione breakpoints como '640:2' e '1024:3'.
- Configuração de exemplo
-
Columns: 4 Gap: 16px Engine: grid Breakpoints: 640:2 1024:3 - Resultado
- Um código CSS limpo com media queries configuradas, garantindo 2 colunas em celulares, 3 em tablets e 4 em desktops.
2. Feed de blog com posts em destaque
Web Designer- Contexto
- Está criando a página inicial de um blog onde os posts normais ficam em grid, mas os posts patrocinados devem ocupar a tela toda.
- Problema
- Intercalar cards de tamanhos variados com banners de largura total sem quebrar o layout.
- Como usar
- Configure o layout para Flexbox, defina a largura do container para 100% e insira '.post--patrocinado' no campo de elementos ignorados.
- Configuração de exemplo
-
Engine: flex Container Width: 100% Skip Elements: .post--patrocinado - Resultado
- O CSS gerado aplica a grade aos posts normais e adiciona regras específicas para que a classe '.post--patrocinado' ocupe 100% da largura da linha.
Testar com amostras
developmentHubs relacionados
FAQ
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 %.