Galeria masonry em CSS (estilo Pinterest)

Galeria masonry em CSS (estilo Pinterest): para que serve

O layout masonry encaixa fotos de alturas diferentes em colunas, sem buracos, como no Pinterest. Cole os endereços das fotos e escolha as colunas no celular, no tablet e no computador, o espaçamento, os cantos e a legenda sobre a foto.

O código usa CSS columns, que funciona em todos os navegadores, e acrescenta o masonry nativo do CSS (display: grid-lanes, lançado no Safari 26.4 em março de 2026 e ainda sem suporte estável no Chrome e no Firefox) dentro de um @supports, como recomenda o aprimoramento progressivo. A página explica a diferença de ordem entre as duas técnicas.

Como usar

1. Cole os endereços das fotos.
2. Ajuste colunas, espaço e cantos.
3. Copie o código.

Quando usar

• Portfólio de fotógrafo.
• Galeria de trabalhos de um salão ou estúdio.
• Mural de inspirações.

Perguntas frequentes

O que é layout masonry?

É a grade em que os itens têm a mesma largura mas alturas diferentes, e cada um se encaixa logo abaixo do anterior na coluna, sem deixar espaços vazios. Ficou conhecido pelo Pinterest e combina com fotos verticais e horizontais misturadas.

Precisa de JavaScript?

Não. O código usa CSS columns, que funciona em todos os navegadores. Onde já existe o masonry nativo do CSS (display: grid-lanes, lançado no Safari 26.4 em março de 2026), um @supports ativa a versão nova, que mantém a ordem das fotos da esquerda para a direita.

Por que a ordem das fotos muda com CSS columns?

Com columns, as fotos descem pela primeira coluna e só depois vão para a segunda, como num jornal. Se a ordem importa (as mais novas primeiro, por exemplo), coloque as mais importantes no começo da lista e use poucas colunas, ou aguarde o grid-lanes chegar aos outros navegadores.

É grátis mesmo?

Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.

Ferramentas parecidas