CSS Grid Level 3, também conhecido como layout "Masonry", pede ajuda para ser criado

• Está em andamento uma proposta para adicionar o layout Masonry do CSS Grid (também chamado de layout de tijolos empilhados ou cascata) ao CSS Grid Level 3

  • O layout Masonry é um padrão que preenche o conteúdo de forma compacta, como tijolos ou uma parede de pedras, permitindo posicionar conteúdos de tamanhos diferentes sem cortá-los ou omiti-los, fazendo o conteúdo fluir por colunas
  • Trata-se de um layout que era difícil de implementar apenas com CSS, sem JavaScript

• Foram criadas 4 demos para implementar o mecanismo Masonry em CSS

  • Criar um layout Masonry/cascata clássico
  • Aproveitar os diversos recursos de definição de colunas do Grid
  • Aproveitar o recurso de mesclagem de colunas do Grid
  • Usar Subgrid e posicionamento explícito

• Combinar os diversos recursos do Grid com Masonry permite criar layouts muito mais criativos e dinâmicos

  • Definição flexível e variada do tamanho das colunas com unidades fr, max-content, min-content e a função minmax()
  • Mesclagem de colunas para destacar determinados itens ou compor grades mais variadas
  • Subgrid para alinhar as trilhas de grades aninhadas à grade pai
  • Posicionamento explícito para definir a localização de itens específicos, como cabeçalhos

• Também há quem defenda que o layout Masonry deva ser separado como um tipo de display próprio

  • Há preocupações de que combinar CSS Grid e Masonry aumente a complexidade e possa impactar negativamente o desempenho
  • Separar Masonry do Grid permitiria evoluir cada funcionalidade de forma independente
  • Mas também existe a opinião de que Masonry deveria ser implementado apenas como um layout limitado a colunas de mesmo tamanho

• Considera-se que incluir o recurso Masonry no CSS Grid traz mais vantagens

  • A especificação do CSS Grid Level 3 já foi escrita e implementada em dois motores de navegador
  • No futuro, seria possível oferecer os mesmos novos recursos para Grid e Masonry (por exemplo: estilização de trilhas)
  • Masonry também é um tipo de Grid, então faz sentido também no plano conceitual

• Gostariam de ouvir a opinião de web designers e desenvolvedores

  • O Masonry deve fazer parte do CSS Grid?
  • Gostariam de poder usar todos os recursos do Grid, como definição variada de tamanhos de coluna, mesclagem de colunas, posicionamento e Subgrid? Ou seria melhor oferecer suporte apenas a colunas de mesmo tamanho?
  • Como vocês usariam esse recurso? Que tipos de layout poderiam criar?
  • Se tiverem demos próprias, compartilhem
  • Há layouts que seriam difíceis de implementar com esse modelo?

• O nome Masonry pode não ser o mais apropriado. Vale considerar uma sintaxe como grid-template-rows: off, no sentido de eliminar as linhas. Tenha em mente que o nome pode mudar no futuro

Opinião do GN⁺

• A adição do recurso Masonry ao CSS Grid parece ser uma mudança significativa, capaz de ampliar bastante o poder de expressão dos layouts na web. Em especial, a possibilidade de implementar com facilidade grades em colunas, organizadas apenas na direção vertical, é bastante atraente
• Por outro lado, é difícil concordar com a proposta de separar Masonry como um tipo de display independente e limitar suas funcionalidades. Pelo contrário, ao ser combinado com os recursos avançados do Grid, o alcance de uso do layout Masonry tende a ser ainda maior
• Ainda assim, o nome Masonry não é muito intuitivo e pode causar confusão, então talvez valha a pena considerar outra denominação que represente melhor uma grade voltada apenas a colunas. Uma sintaxe como grid-template-rows: none, por exemplo, pode transmitir com mais clareza a ideia de uma “grade sem linhas”
• Espera-se que essa proposta possa tornar o CSS Grid uma ferramenta ainda mais poderosa. Parece importante experimentar diferentes casos de layout e apresentar opiniões ativamente

[GN⁺]

Opinião do Hacker News

Resumo:

• O CSSWG e as equipes de DevRel dos fornecedores de navegadores discutem desde 2020 como incluir oficialmente o layout Masonry no CSS
  • A equipe do WebKit decidiu tornar essa discussão pública para pedir opiniões de designers e desenvolvedores
  • Isso pode se tornar um precedente importante e é um debate fundamental sobre tratar todas as opções de layout como parte do CSS Grid ou continuar adicionando novas propriedades CSS Display conforme a necessidade
• Comparar o layout Masonry a empilhar tijolos é divertido, mas empilhar tijolos reais dessa forma seria um desastre de engenharia estrutural
• A demo de megamenu é um caso de uso inadequado do layout Masonry, pois destrói o fluxo de leitura e frustra seriamente as expectativas
  • Usuários com deficiência visual sempre vão ler na ordem “errada”
  • Deveria ter sido implementado em colunas usando break-inside: avoid
• A demo de jornal também é um pouco suspeita por motivos semelhantes
• No caso de imagens ou mídia em blocos independentes, o layout Masonry funciona melhor
• Como essas demos são baseadas em layout de grid, elas aparecem como um formato razoável de linhas fixas mesmo em navegadores sem suporte
• Gosto da sensação geral do layout Masonry/Waterfall
  • Mas seria bom haver um layout que preservasse mais o fluxo de leitura da esquerda para a direita em vez do alinhamento Masonry padrão
• Reflexão sobre como projetar um sistema de layout que possa substituir o CSS
  • Há curiosidade sobre se sistemas realmente implementados, como Qt, Tk e SwiftUI, têm aspectos melhores
  • Como poderíamos oferecer uma interface melhor para desenvolvedores?
• Apresentação de um caso em que o efeito Masonry foi implementado sem JS em um site pessoal de fotos
  • Usando display:inline-block para tratar as fotos como texto e fazê-las refluírem para uma nova linha
  • O resultado foi mais satisfatório do que com bibliotecas Masonry
• Com Flexbox e Grid já existentes, questiona-se se faz sentido adicionar mais opções de “layout” ao CSS
  • Talvez a melhor solução seja criar um sistema final baseado em restrições, ainda que complexo, capaz de cobrir todos os casos de layout
• É bom ver a equipe do WebKit voltando a fazer um excelente trabalho em público