Implementar layouts do tipo "cachoeira" (masonry) sempre foi um desafio no desenvolvimento front-end. Até recentemente, a solução padrão envolvia o uso de bibliotecas como Masonry.js ou a escrita de scripts complexos para calcular a posição de cada elemento com base na altura dos seus vizinhos. Com a introdução do Grid Lanes no CSS, essa tarefa agora pode ser resolvida de forma nativa.

A Estrutura Básica do Grid Lanes

O conceito por trás desta nova funcionalidade é permitir que os itens de um grid se encaixem nos espaços vazios das colunas, indeepndentemente da altura das linhas. Atualmente, o suporte inicial pode ser testado em ambientes experimentais, como o Safari Technology Preview.

Veja como configurar um layout funcional com poucas linhas de código:

.galeria-masonry {
    display: grid-lanes;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    column-gap: 20px;
    row-gap: 20px;
}

Neste exemplo, definimos o container com display: grid-lanes. A propriedade grid-template-columns utiliza a função repeat com auto-fill, garantindo que o navegador crie tantas colunas quanto o espaço permitir, respeitando o mínimo de 220px. O navegadro gerencia automaticamente o empilhamento vertical, movendo cada novo item para a coluna que estiver menos ocupada no topo.

Por que abandonar o JavaScript para isso?

A principal vantagem desta abordagem é o desempenho. Quando utilizamos JavaScript para layouts, o navegador precisa realizar cálculos de geometria e disparar novos ciclos de renderização (reflow) sempre que a janela é redimensionada ou novos itens são adicionados. Com o suporte nativo do CSS, o motor de renderização do browser otimiza esse processo, resultando em animações e redimensionamentos muito mais fluidos.

Além disso, a integração com funcionalidades de infinite scroll torna-se trivial. Ao anexar novos elementos ao DOM, o CSS Grid Lanes posiciona automaticamente o conteúdo sem a necessidade de reexecutar scripts de layout.

Customização de Colunas

Como a base deste recurso é o sistema de Grid, você mantém total controle sobre a anatomia das colunas. É possível criar padrões assimétricos que dão mais personalidade ao design do site:

.mural-complexo {
    display: grid-lanes;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 15px;
}

No código acima, estabelecemos um layout de três colunas onde a coluna central é o dobro da largura das colunas laterais. O navegador continuará distribuindo os elementos verticalmente de forma inteligente, preenchendo os espaços conforme a altura de cada card ou imagem, mas respeitando as proporções de largura definidas.