Layout masonry em 2026: por que passei a montar portfólios com CSS Grid Lanes, sem JavaScript

Resposta curta: em 2026 dá para fazer layout masonry, aquele mural de imagens com alturas diferentes encaixadas sem buracos, direto no CSS, com display: grid-lanes. O Safari 26.4 já entrega isso em produção, Chrome, Edge e Firefox estão com a implementação atrás de flag, e com um fallback simples eu já uso hoje nas galerias de portfólio do Studio Seu, sem nenhuma biblioteca JavaScript.

Eu passei anos aceitando um acordo ruim. Toda vez que um cliente queria uma galeria com fotos verticais e horizontais misturadas, eu tinha duas opções: cortar tudo no mesmo formato e matar a composição, ou carregar um script para calcular a posição de cada imagem. Em 2026 esse acordo acabou, e quero explicar como estou lidando com isso na prática.

O que é o CSS Grid Lanes e por que o layout masonry mudou em 2026

Masonry é o layout que ficou famoso com o Pinterest: colunas de largura fixa em que cada item cai no espaço livre mais alto, como tijolos. Durante anos a discussão sobre como trazer isso para o CSS travou entre WebKit, Mozilla e Chromium. Uns queriam dentro do Grid, outros queriam uma propriedade separada.

Em 7 de janeiro de 2026 o grupo de trabalho do CSS fechou a questão: o nome oficial virou display: grid-lanes, parte do CSS Grid Level 3. Ele substitui os protótipos antigos, como grid-template-rows: masonry, e aposenta de vez a necessidade de bibliotecas como o Masonry.js.

• Safari 26.4 (Mac e iOS) foi o primeiro navegador a lançar o recurso no canal estável.
• Chrome e Edge têm a implementação atrás de flag desde a versão 140 e estão ajustando o código à especificação final, com chegada ao estável prevista para o fim de 2026.
• Firefox também tem o recurso atrás de flag, com previsão entre o fim de 2026 e o começo de 2027.

A propriedade nova que eu mais gostei: flow-tolerance

O Grid Lanes traz uma propriedade realmente inédita, a flow-tolerance (que chegou a se chamar item-tolerance antes de ser renomeada em janeiro). Ela define o quanto o algoritmo liga para pequenas diferenças de altura na hora de escolher a próxima coluna. Na minha experiência, esse detalhe é o que separa um mural que parece organizado de um mural que parece bagunçado: com tolerância maior, a ordem de leitura fica mais previsível da esquerda para a direita, e o olho não fica pulando.

Como eu uso o layout masonry nas galerias do Studio Seu

Aqui no Studio Seu quase todo projeto de marca termina com uma galeria: mockups de embalagem, cartazes verticais, telas de site em paisagem, frames de vídeo. São formatos que não conversam entre si. Até pouco tempo, eu forçava tudo em 4:3 ou montava um bento grid à mão para cada case. Funcionava, mas cada case novo virava retrabalho.

Hoje o meu padrão é este:

• Base em Grid comum. Todo navegador recebe um grid com colunas iguais e imagens no formato original. Fica bonito, só com alguns vãos.
• Melhoria progressiva com @supports. Dentro de @supports (display: grid-lanes) eu troco para grid-lanes. Quem está no Safari já vê o mural encaixado; o resto vê a versão base, sem nada quebrado.
• Zero JavaScript de layout. Nada de recalcular posição no resize, nada de pular conteúdo enquanto as imagens carregam.
• Largura e altura declaradas em cada imagem. Isso continua obrigatório: é o que evita salto de layout, com ou sem masonry.

O cuidado que eu não abro mão: ordem de leitura e acessibilidade

Masonry tem uma armadilha: a ordem visual pode não bater com a ordem do HTML. Para uma galeria de fotos isso quase não importa. Para cards com texto, links e preços, importa muito, porque quem navega pelo teclado ou por leitor de tela segue o código, não o desenho. Por isso eu uso grid-lanes em galerias de imagem e em murais de inspiração, e continuo usando Grid comum em listagens de produto e em qualquer lugar em que a sequência tenha significado.

Por que isso importa para o negócio, e não só para o código

Pode parecer detalhe técnico, mas eu vejo três ganhos bem concretos para quem contrata:

• A imagem é mostrada como foi fotografada. Um cartaz vertical continua vertical. Em portfólio, e-commerce de moda ou decoração, isso valoriza o trabalho de direção de arte que o cliente pagou.
• Site mais leve e mais rápido. Tirar uma biblioteca de layout e o script que roda a cada redimensionamento ajuda nos Core Web Vitals, principalmente no celular.
• Menos manutenção. Quando a equipe do cliente sobe fotos novas pelo CMS, o layout se ajusta sozinho. Ninguém precisa me chamar para reorganizar o grid.

Perguntas frequentes

Já posso usar CSS Grid Lanes em produção em 2026?

Sim, desde que como melhoria progressiva. O Safari 26.4 já suporta; nos outros navegadores, um @supports garante uma versão em grid comum que funciona bem enquanto o suporte chega.

Grid Lanes substitui o Masonry.js?

Na minha opinião, sim, para novos projetos. Ele faz o mesmo encaixe de forma nativa, sem custo de JavaScript e sem recalcular posições quando a tela muda de tamanho.

Qual a diferença entre layout masonry e bento grid?

No bento grid eu defino à mão o tamanho de cada bloco, então ele é ótimo para composições editoriais fechadas. No masonry as colunas são fixas e os itens se encaixam sozinhos, o que é melhor para conteúdo que cresce, como portfólios e catálogos.

Masonry prejudica a acessibilidade?

Pode prejudicar se a ordem visual confundir a ordem de leitura. Eu uso em galerias de imagem, em que a sequência não muda o sentido, e evito em listas com texto e ações.

Conclusão

Eu gosto quando a web alcança o que o design sempre quis fazer. O Grid Lanes é um desses momentos: o mural que antes exigia gambiarra agora é uma linha de CSS, e isso me deixa gastar tempo com o que importa, que é escolher e ordenar as imagens certas. Se o seu portfólio ou a sua loja ainda corta todas as fotos no mesmo formato, talvez seja hora de rever isso. Se quiser conversar sobre como ficaria no seu site, é só me chamar aqui no Studio Seu.