# Gerador de layout masonry CSS Gera layouts masonry em CSS puro com breakpoints, espacamento configuravel e seletores ignorados > Página canônica: https://elysiatools.com/pt/tools/css-masonry-layout-generator - **Categoria:** Development - **Palavras-chave:** css, masonry, layout, grid ## Visão geral 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 ## Entradas - **Colunas** (number) - **Largura do container** (text) - **Espacamento** (text) - **Motor de layout** (select) - **Breakpoints responsivos** (textarea): 640:2 960:3 1280:4 - **Elementos ignorados** (textarea): .masonry__item--featured .masonry__hero ## 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 - Criação de galerias de fotos responsivas onde as imagens possuem proporções e alturas diferentes. - Desenvolvimento de feeds de artigos ou blogs em formato de grid dinâmico. - Montagem de painéis de e-commerce com vitrines de produtos e banners promocionais de largura total intercalados. ## Perguntas frequentes ### 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 %. ## Ferramentas relacionadas - [Sincronizador de paleta Tailwind](https://elysiatools.com/pt/tools/tailwind-color-palette-sync): Insira HEX, escolha o esquema de nomes (escala 50–950 / nome único / aninhamento) e gere o fragmento theme.extend.colors do tailwind.config.ts com níveis WCAG AA/AAA. Dark mode opcional. - [Conversor de cURL para Go (net/http)](https://elysiatools.com/pt/tools/curl-to-go): Converte um comando cURL em um snippet de código Go net/http com http.NewRequest, cabeçalhos e corpo - [Conversor de cURL para JavaScript (axios)](https://elysiatools.com/pt/tools/curl-to-js-axios): Converte um comando cURL em um snippet de código JavaScript axios com objeto de configuração, cabeçalhos e dados - [Conversor de cURL para JavaScript (fetch)](https://elysiatools.com/pt/tools/curl-to-js-fetch): Converte um comando cURL em um snippet de código JavaScript fetch() com cabeçalhos, corpo e método - [Conversor de cURL para PHP (cURL)](https://elysiatools.com/pt/tools/curl-to-php): Converte um comando cURL em um snippet de código PHP cURL com curl_setopt, cabeçalhos e campos POST - [Conversor de cURL para Python (requests)](https://elysiatools.com/pt/tools/curl-to-python): Converte um comando cURL em um snippet de código Python requests com cabeçalhos, dados e método - [Encurtador de URL](https://elysiatools.com/pt/tools/url-shortener): Gera URLs curtas usando serviços reais de encurtamento (is.gd e v.gd) - [Testador de estresse de contrato de API](https://elysiatools.com/pt/tools/api-contract-stress-tester): Gera casos de limite a partir de OpenAPI 3.x e opcionalmente envia ao backend real para detectar divergencias do contrato. ## Exemplos - [Exemplos do Framework CSS Bulma](https://elysiatools.com/pt/samples/bulma): Exemplos do framework CSS Bulma incluindo colunas, componentes, controles de formulário, sistema de layout e padrões de design modernos baseados em CSS - [Amostras CSS](https://elysiatools.com/pt/samples/css-viewer-samples): Arquivos de amostra para o visualizador CSS no navegador - [Exemplos do Framework CSS Milligram](https://elysiatools.com/pt/samples/milligram): Exemplos do framework CSS Milligram incluindo tipografia, formulários, grids e componentes - [Tailwind CSS Samples](https://elysiatools.com/pt/samples/tailwind-css): Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations ## Conteúdo relacionado - [Criação de CSS, layout e cascata](https://elysiatools.com/pt/hubs/css-authoring-layout-and-cascade-workflows): Crie e revise CSS com formatação, diagnóstico de seletores, trechos responsivos, efeitos visuais e verificações renderizadas.