Falei sobre layout CSS na conferência CSS Day recentemente, e na sessão de perguntas e respostas depois me perguntaram sobre layout de alvenaria em CSS. O layout de alvenaria, caso você não saiba, é onde os itens de altura diferente são dispostos em colunas, mas, em vez de serem alinhados no eixo da linha, os itens abaixo efetivamente se movem para preencher quaisquer lacunas, como um pedreiro – portanto o nome. O design de grade do Pinterest é um exemplo comumente citado sempre que a conversa sobre alvenaria surge.
O estado atual da alvenaria em CSS
Atualmente podemos construir um tipo de layout de faux-masonry (ou “fakesonry”, se preferir) em CSS usando colunas.
.list {
columns: 20rem;
column-gap: 1rem;
}Isso criará um layout que se parece com alvenaria, mas os itens são ordenados por coluna, não por linha. Se você estivesse usando esse layout para uma página inteira, para o usuário navegar pelos itens em ordem, eles precisariam percorrer cada coluna, até o final, antes de rolar de volta para o topo da página novamente. Talvez isso possa ser uma experiência visual OK se a ordem não importa, mas os usuários que navegam por meio de um teclado ou leitor de tela ainda precisam navegar por coluna. Quando pensamos em um layout de alvenaria, normalmente esperamos que os itens sejam ordenados horizontalmente (ou ao longo do eixo inline).
Também podemos construir uma grade que se pareça com alvenaria, mas exigiria a colocação manual de itens de grade, e a altura de cada item não seria realmente determinada pelo conteúdo. Na verdade, existem várias maneiras de quase fazer alvenaria em CSS, e algumas delas podem nos servir bem em algumas situações – confira este artigo de truques de CSS de 2019 que reúne algumas delas. (Cuidado ao reordenar com CSS. Não é recomendado por motivos de acessibilidade.)
Mas a construção de um verdadeiro layout de alvenaria atualmente requer Javascript, como a biblioteca Maçonaria criada exatamente para esse fim.
O que vem a seguir para a alvenaria?
Eu me lembro de alvenaria em CSS sendo discutida por Rachel Andrew há algum tempo, mas admito que está meio que saindo do meu radar recentemente. Acho que isso se deve em parte ao fato de que não sou obrigado a construir tantos layouts de alvenaria hoje em dia. Parte disso pode ser devido à mudança de emprego, mas também suspeito que a alvenaria não seja tão popular entre os designers quanto antes. Para mim, parece uma tendência de design do final dos anos 2010, de quando o Pinterest estava na moda.
Talvez também se deva a uma maior conscientização de desempenho e acessibilidade. Usar uma biblioteca JS para layout não fará nenhum favor às suas métricas de desempenho e é algo que eu desaconselho sempre que possível. E claro, alvenaria parece legal* (*ou era em 2017), mas eu diria que não é o layout mais amigável: a ordem do conteúdo não é tão clara quando os itens não estão alinhados. (Eu não tenho nenhuma evidência para apoiar isso, é apenas um sentimento pessoal.)
Mas e a alvenaria em CSS?
Ah sim, todo o ponto deste artigo. Apesar da alvenaria ser menos popular, ainda seria ótimo ter uma maneira de fazer isso sem JS. Pois bem, a Especificação CSS Grid Nível 3 inclui uma proposta de layout de alvenaria. Na verdade, ele já pode ser ativado com um sinalizador no Firefox, então você pode experimentar por si mesmo.
Funciona usando a palavra-chave masonrypara a propriedade grid-template-columnsou grid-template-rows. Este exemplo nos dará uma grade de 6 colunas com alvenaria aplicada ao eixo da linha, para replicar a grade no estilo Pinterest:
.grid {
display: grid;
grid-template-rows: masonry;
grid-template-columns: repeat(6, 1fr);
}Para uma visão geral completa, Rachel tem um ótimo artigo de 2020 na Smashing Magazine.
A alvenaria pertence ao Grid?
Um tempo atrás, houve algum debate sobre se a alvenaria pertence à especificação Grid, já que não é realmente Grid ou flexbox, mas tem elementos de ambos. Ou talvez seja uma coisa totalmente própria? Embora eu tenha algumas reservas sobre isso fazer parte da especificação do Grid, acho que a implementação atual faz sentido. Parece um pouco com o Subgrid em alguns aspectos, onde estamos efetivamente dizendo a um elemento para usar uma grade diferente no eixo da linha ou da coluna – embora determinada não por seu pai, mas por um algoritmo predeterminado.
Outra questão, mais profunda, é se o esforço é justificado. Se a alvenaria é uma tendência de design em declínio, o ritmo às vezes glacial dos padrões da web pode garantir que, quando o suporte ao navegador for generalizado, ninguém realmente queira usá-lo de qualquer maneira.
Embora eu pessoalmente adoraria ver a alvenaria implementada, há muitos recursos que devem ser uma prioridade mais alta.