Layout masonry: abordagens com CSS e JS

O layout em mosaico posiciona itens em colunas, fazendo cada item preencher o próximo espaço vertical disponível, como no Pinterest. Os itens têm larguras de coluna iguais, mas alturas variáveis. O resultado é uma grade densa e visualmente dinâmica, sem espaço em branco desperdiçado entre as linhas.

Chrome e Firefox, com um recurso ativado por sinalizador, oferecem suporte a grid-template-rows: masonry. Os itens são posicionados em colunas, mas as linhas recebem a altura do conteúdo, permitindo que itens de alturas variadas se agrupem sem lacunas. Esta é a futura solução nativa.

As colunas do CSS criam uma disposição semelhante a um mosaico: columns: 3; column-gap: 1rem. Os itens fluem automaticamente de cima para baixo em cada coluna. Limitação: os itens são ordenados coluna por coluna (parte superior da coluna 1, parte superior da coluna 2...) e não linha por linha, o que afeta a ordem de leitura e a acessibilidade.

Impeça que os itens se dividam entre colunas: break-inside: avoid em cada item. Sem isso, um cartão alto pode ser dividido entre duas colunas, cortando o conteúdo ao meio. Sempre adicione essa propriedade ao usar colunas de CSS para conteúdo semelhante a cartões.

Masonry.js (de David DeSandro) reposiciona itens posicionados de forma absoluta calculando as alturas das colunas e colocando cada item na coluna mais curta. Isotope amplia esse recurso com ordenação e filtragem. Ambos exigem JavaScript para calcular e aplicar as posições.

Uma abordagem leve: defina uma grade com colunas fixas e linhas de 1 px e use JS para definir grid-row-end: span N em cada item com base na altura do conteúdo e na altura da linha. Os itens mantêm o alinhamento das linhas da grade e, ao mesmo tempo, obtêm alturas variáveis.

As posições do mosaico ficam desatualizadas quando o tamanho da janela muda ou quando as imagens são carregadas. Use ResizeObserver para detectar mudanças de tamanho e acionar um recálculo. Aplique uma limitação de frequência aos recálculos para evitar computação excessiva durante eventos de redimensionamento rápidos.

Imagens com alturas desconhecidas fazem o mosaico ser recalculado depois do carregamento. Forneça atributos explícitos de largura e altura em todas as imagens para que o navegador reserve espaço antes do carregamento. Isso evita mudanças de posição e reduz o número de etapas de recálculo.

Adicionar itens a uma disposição em mosaico exige recalcular somente as colunas afetadas (as dos novos itens), e não toda a grade. Bibliotecas como Masonry.js oferecem animação para itens adicionados e uma disposição incremental, sem refazer todo o layout a cada novo lote.

A ordem visual do mosaico difere da ordem do DOM em disposições posicionadas por JavaScript. Garanta que a ordem de tabulação siga a ordem do DOM (a sequência lógica de leitura), e não a posição visual. Adicione tabindex com cuidado ou dependa do fluxo natural do DOM para a navegação pelo teclado.

Colunas de CSS: simples, sem JS, mas com sequência de leitura ordenada por colunas (não por linhas) e sem filtragem ou ordenação. Mosaico com grade: ainda não tem suporte para produção. Mosaico em JS: completo, mas adiciona peso e um atraso de renderização, pois as posições são calculadas depois que o conteúdo é carregado.

Qual propriedade do CSS impede que um cartão se divida entre duas colunas de CSS?

Um layout em mosaico pode ser obtido com colunas de CSS (simples, mas ordenado por colunas), com o experimental grid-template-rows: masonry (voltado para o futuro) ou com bibliotecas JavaScript como Masonry.js (com recursos completos de ordenação e filtragem). Cada abordagem envolve compromissos entre simplicidade, acessibilidade e capacidade.