CSS Grid Lanes: O Novo Layout Masonry Nativo

Você já construiu layouts no estilo Pinterest antes. Você usou bibliotecas JavaScript, hacks de multi-colunas CSS, ou soluções complexas com Grid usando row spans calculados. Cada abordagem funciona, mas nenhuma parece nativa.

O CSS Grid Level 3 está explorando comportamento nativo no estilo masonry dentro do Grid. Uma proposta atual introduz display: grid-lanes como uma possível sintaxe para este recurso—mas antes de refatorar seu código de produção, você precisa entender onde as coisas realmente estão no início de 2026.

Este artigo cobre o conceito central por trás do CSS Grid Lanes, como ele difere do Grid tradicional, as realidades atuais de suporte dos navegadores e o que você deve considerar antes de adotá-lo.

O Que o CSS Grid Lanes Realmente Faz

O CSS Grid tradicional opera em dois eixos simultaneamente. Você define tanto linhas quanto colunas, e os itens ocupam células explícitas. Isso cria layouts retangulares previsíveis—mas também deixa lacunas quando os itens têm alturas variadas.

O rascunho do CSS Grid Level 3 introduz comportamento no estilo masonry, às vezes referido como “grid lanes”, onde você define tracks em um eixo (tipicamente colunas) e os itens se encaixam de forma compacta no outro eixo usando um algoritmo no estilo masonry. Os itens fluem para qualquer lane que tenha mais espaço disponível, preenchendo lacunas automaticamente.

A sintaxe atual do rascunho em discussão se parece com isto:

.container {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

No entanto, a sintaxe e o comportamento ainda estão evoluindo. Experimentos anteriores usaram valores como masonry dentro de grid-template-rows ou grid-template-columns, e alguns motores implementaram versões protótipo dessas abordagens. O CSS Working Group continua refinando como o masonry se integra ao Grid Level 3. Veja o rascunho mais recente do CSS Grid Layout Module Level 3.

Como o Grid Lanes Difere do Grid Padrão

Com display: grid, os itens respeitam tanto os tracks de linha quanto de coluna. Itens mais curtos deixam espaço vazio abaixo deles até que a próxima linha comece.

Com o comportamento de Grid no estilo masonry, apenas um eixo tem tracks definidos. Os itens no outro eixo se empilham com base no espaço disponível, não em limites estritos de linha. Isso cria a aparência escalonada característica dos layouts masonry.

A maioria dos recursos familiares do Grid—como definir tracks de coluna e posicionamento explícito—permanecem conceitualmente disponíveis, mas as implementações podem variar enquanto o recurso é experimental. Comportamentos como spanning e posicionamento em casos extremos ainda não são totalmente interoperáveis entre os motores.

Layouts Waterfall vs. Brick

Defina colunas com grid-template-columns, e os itens fluem verticalmente—o layout waterfall clássico. Defina linhas com grid-template-rows (em implementações experimentais), e os itens fluem horizontalmente em um padrão estilo tijolo.

Detalhes como comportamento de fluxo e controles de ordenação ainda estão em discussão na especificação e podem diferir entre as versões preview dos navegadores. Evite depender de propriedades não-padrão ou apenas de rascunho, a menos que você verifique o suporte no seu navegador alvo.

Suporte dos Navegadores: O Cenário Realista

Aqui é onde o planejamento de produção fica complicado.

No início de 2026, o comportamento masonry nativo no CSS Grid permanece experimental em todos os principais navegadores:

• Safari Technology Preview tem uma das implementações protótipo mais completas.
• Navegadores baseados em Chromium experimentaram com sintaxe relacionada a masonry por trás de flags, incluindo valores de track masonry anteriores.
• Firefox implementou experimentos de masonry por trás de flags de configuração.

Nenhum canal estável de navegador principal oferece suporte totalmente interoperável e sem flags no momento da escrita. Você pode acompanhar o status de compatibilidade via Can I use e notas de lançamento dos navegadores.

O CSS Working Group continua refinando detalhes de integração dentro do Grid Level 3.

A conclusão prática: Não envie sintaxe de Grid no estilo masonry para produção sem fallbacks.

Estratégia de Progressive Enhancement

A detecção de recursos permite que você experimente onde há suporte enquanto faz fallback graciosamente:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

@supports (display: grid-lanes) {
  .container {
    display: grid-lanes;
  }
}

Navegadores sem suporte renderizam um layout Grid padrão. Os itens se alinham às linhas em vez de se encaixarem de forma compacta—uma linha de base aceitável para muitos casos de uso.

Como a sintaxe pode mudar antes da estabilização, trate isso como progressive enhancement em vez de uma dependência de produção de longo prazo.

Preocupações com Acessibilidade e Ordem do Código-Fonte

Layouts masonry introduzem um problema de ordem DOM-versus-visual. Os itens aparecem em posições determinadas pelo algoritmo de empacotamento, não pela ordem do código-fonte. Um usuário navegando com Tab pelo conteúdo pode saltar de forma imprevisível pelo layout.

Isso não é exclusivo do Grid Lanes—é inerente aos layouts no estilo masonry. Você deve testar a navegação por teclado minuciosamente, especialmente para conteúdo onde a sequência de leitura importa.

Leitores de tela seguem a ordem do DOM independentemente do posicionamento visual. Certifique-se de que sua estrutura HTML faça sentido quando lida linearmente.

Conclusão

Para experimentos, protótipos e camadas de progressive enhancement, o comportamento de Grid no estilo masonry vale a pena explorar agora. A direção está se tornando mais clara dentro do Grid Level 3, e a experiência prática hoje compensa quando o suporte dos navegadores amadurecer.

Para recursos de produção que exigem comportamento consistente entre navegadores, espere. Monitore discussões da especificação e notas de implementação dos navegadores antes de se comprometer.

O masonry CSS nativo tem sido uma solicitação de longa data. Está finalmente tomando forma—mas ainda não está totalmente padronizado ou interoperável. Verifique se o suporte dos navegadores corresponde aos seus requisitos antes de adotá-lo amplamente.

Perguntas Frequentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..