Publicado em: 19 de setembro de 2024, última atualização: 13 de fevereiro de 2026
O Grupo de trabalho de CSS combinou as duas propostas de alvenaria em CSS em uma especificação de rascunho. O grupo espera que isso facilite a comparação entre os dois e a tomada de uma decisão final. A equipe do Chrome ainda acredita que uma sintaxe de alvenaria separada seria a melhor maneira de prosseguir. Embora o maior problema de desempenho mencionado na postagem anterior tenha sido resolvido, ainda há preocupações em relação à sintaxe, aos valores iniciais e à facilidade de aprendizado de uma versão combinada com a grade.
Para testar nossas proposições, trabalhamos em alguns exemplos para mostrar como o masonry funcionaria com cada versão. Confira os exemplos nesta postagem e envie seu feedback para que possamos tomar uma decisão e continuar com esse recurso.
Esta postagem não aborda todos os casos de uso possíveis, mas fica claro que
separar o layout em alvenaria do layout de grade não vai resultar na falta de
funcionalidade do recurso. Na verdade, pode ser o contrário. Como você vai ver nesta postagem,
a versão display: masonry cria novas oportunidades e uma sintaxe mais simples.
Além disso, muitos desenvolvedores levantaram preocupações sobre o potencial de
reordenar itens com alvenaria causando problemas de acessibilidade. Isso também está sendo resolvido para as duas versões da sintaxe, usando a propriedade reading-flow proposta.
Um layout básico em alvenaria
Esse é o layout que a maioria das pessoas imagina quando pensa em alvenaria. Os itens aparecem em linhas, e depois que a primeira linha é colocada, os itens subsequentes se movem para o espaço deixado por itens mais curtos.
Com display: masonry
Para criar um layout em alvenaria, use o valor masonry na propriedade display. Isso cria um layout em alvenaria com faixas de coluna definidas por você (ou pelo conteúdo) e alvenaria no outro eixo. O primeiro item é
mostrado no início do bloco e inline (portanto, no canto superior esquerdo em inglês), e os itens
são dispostos na direção inline.
Para definir faixas, use masonry-template-tracks com valores de lista de faixas, como usado
no layout de grade CSS.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
Com display: grid
Para criar um layout em alvenaria, primeiro crie um layout de grade usando o valor de grid
para a propriedade display. Defina colunas com a propriedade grid-template-columns e atribua a grid-template-rows o valor masonry.
Isso vai criar um layout como esperado com itens de grade posicionados automaticamente. No entanto, os itens em cada linha usam um layout de alvenaria e são reorganizados para ocupar o espaço deixado por itens menores na linha anterior.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
Pontos a considerar entre as duas opções
Uma diferença notável entre esses métodos é que, com a versão display: masonry, você recebe um layout em alvenaria mesmo que não especifique nenhuma faixa com masonry-template-tracks. Portanto, display: masonry pode ser tudo o que você precisa.
Isso ocorre porque o valor inicial de masonry-template-tracks é repeat(auto-areas, auto). O layout cria quantas faixas de tamanho automático forem necessárias para caber no contêiner.
Fluxo invertido com alvenaria
A especificação inclui maneiras de mudar a direção do fluxo de alvenaria. Por exemplo, você pode mudar o fluxo para mostrar do fim do bloco para cima.
Com display: masonry
Crie um layout em alvenaria com display: masonry e use masonry-direction
com um valor de column-reverse.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
Com display: grid
Crie um layout em alvenaria com display: grid e grid-template-rows: masonry.
Em seguida, use a propriedade grid-auto-flow com um novo valor de row-reverse para
fazer com que os itens sejam dispostos da extremidade do bloco do contêiner de grade.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
Pontos a considerar entre as duas opções
A versão display: masonry é muito parecida com o funcionamento do flexbox. Mude a direção em que as colunas fluem usando a propriedade masonry-direction com um valor de column-reverse.
A versão da grade CSS usa grid-auto-flow. Como estão definidos atualmente, grid-auto-flow: row-reverse e grid-auto-flow: column-reverse teriam o mesmo efeito. Isso pode ser confuso, já que você pode esperar que eles façam algo diferente.
Masonry para linhas
Você também pode mudar a direção para definir linhas.
Com display: masonry
Crie um layout em alvenaria com display: masonry e defina o valor de masonry-direction como row. A menos que você queira que as linhas tenham um tamanho de bloco específico, não é necessário especificar nenhum dimensionamento de faixa, já que o padrão é auto. Portanto, as faixas serão dimensionadas de acordo com o conteúdo que contêm.
.masonry {
display: masonry;
masonry-direction: row;
}
Com display: grid
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
Pontos a considerar entre as duas opções
Assim como no fluxo invertido, mudar a versão display: masonry de colunas para linhas significa mudar o valor de masonry-direction. Na versão em grade, você precisa trocar os valores das propriedades grid-template-columns e grid-template-rows. Ou, se estiver usando o atalho, mude a ordem da sintaxe.
Com esses dois exemplos de fluxo de troca, a versão display: masonry parece mais intuitiva. Há uma única propriedade que controla o fluxo
masonry-direction, que assume um dos seguintes valores:
rowcolumnrow-reversecolumn-reverse
Em seguida, adicione as informações de dimensionamento necessárias a masonry-template-tracks,
supondo que o valor automático padrão não seja o que você precisa.
Com a grade, para fazer a direção inversa, use a propriedade grid-auto-flow. Para fazer a troca de alvenaria de linha, mude o valor das propriedades grid-template-*. Também não é possível deixar o valor do eixo da grade indefinido na sintaxe atual. Você sempre precisa especificar propriedades grid-template-* no eixo que não tem um valor de masonry.
Posicionar itens
Em ambas as versões, é possível posicionar itens explicitamente usando o posicionamento baseado em linhas, que você já conhece do layout de grade. Nas duas versões, só é possível posicionar itens no eixo da grade, que é o eixo com as faixas predefinidas. Não é possível posicionar itens no eixo que está fazendo o layout em alvenaria.
Com display: masonry
O CSS a seguir define um layout em alvenaria com quatro colunas. Portanto, o eixo da grade é de colunas. O item com uma classe de a é colocado da primeira linha de coluna até a terceira, abrangendo duas faixas com as novas propriedades masonry-track-*. Isso também pode ser definido como uma abreviação de masonry-track: 1 / 3;.
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
Com display: grid
O CSS a seguir define um layout em alvenaria com quatro colunas. Portanto, o eixo da grade é de colunas. O item com uma classe de a é colocado da primeira linha
de coluna até a terceira linha de coluna, abrangendo duas faixas com as propriedades
grid-column-*. Isso também pode ser definido como uma abreviação de grid-column: 1 / 3;.
Se o eixo da grade for colunas, as propriedades grid-row-* serão ignoradas. Se o eixo for linhas, as propriedades grid-columns-* serão ignoradas.
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
É possível usar linhas nomeadas com as duas sintaxes. Os exemplos a seguir mostram uma grade
com duas linhas de coluna chamadas a.
Com display: masonry
As linhas nomeadas são definidas no valor da lista de faixas de
masonry-template-tracks. O item pode ser colocado depois de qualquer linha chamada a.
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
Com display: grid
As linhas nomeadas são definidas no valor da lista de faixas de
grid-template-columns. O item é colocado após a primeira linha chamada a. Se a propriedade grid-row estiver definida, ela será ignorada.
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
Você também pode usar áreas nomeadas nas duas sintaxes. Os exemplos a seguir mostram uma grade com três faixas chamadas "a", "b" e "c".
Com display: masonry
As faixas são nomeadas como o valor de masonry-template-areas. Como nenhum tamanho de faixa
foi definido, os três usam o tamanho auto por padrão. O item é colocado na faixa "a".
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
Isso funciona da mesma forma ao definir linhas ou colunas. A única diferença é a propriedade masonry-direction.
Com display: grid
Para colunas, a sintaxe é essencialmente idêntica. Da mesma forma, como nenhum tamanho de faixa
está definido, os três padrões são o tamanho auto, mas ainda é necessário
dizer explicitamente que o outro eixo é de alvenaria:
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
Para linhas, no entanto, o valor precisa ser escrito de maneira diferente, porque grid-template-areas está definindo uma área bidimensional, e cada linha é escrita como uma string separada:
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
Pontos a considerar entre as duas opções
Com qualquer posicionamento, a sintaxe display: masonry funciona melhor quando se trata de mudar de direção. Como a propriedade masonry-track-* funciona em qualquer direção do eixo da grade, basta mudar o valor de masonry-direction para mudar a direção. Com a versão de grade, no mínimo, você vai precisar de propriedades redundantes para ativar a troca. No entanto, consulte os exemplos anteriores para outras maneiras em que mudar de direção é mais complicado com a versão de grade.
Abreviações
Neste post, usamos as formas completas para deixar mais claro quais propriedades estão em uso. No entanto, as versões display: masonry e display: grid podem ser definidas usando abreviações.
Com display: masonry
O atalho display: masonry usa a palavra-chave masonry. Para criar o layout básico em
alvenaria, use o seguinte CSS:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
Para criar um layout de alvenaria simples baseado em linhas:
.masonry {
display: masonry;
masonry: row;
}
Para definir faixas e um layout baseado em linhas com o atalho:
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
Com display: grid
Para criar o layout básico em alvenaria usando o atalho grid.
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
Para criar um layout de alvenaria simples baseado em linhas:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
Em exemplos mais complexos, como a sintaxe geral de display:masonry é mais simples, mais propriedades podem ser agrupadas no atalho sem ficar muito complexas.
Por exemplo, imagine criar três colunas, chamadas "a", "b" e "c", preenchidas de baixo para cima.
Com display:masonry
Em display: masonry, os três podem ser definidos juntos no atalho:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
Como eles são dimensionados automaticamente, não é necessário especificar os tamanhos, mas se você quiser um tamanho específico, ele poderá ser adicionado. Por exemplo: masonry: column-reverse 50px 100px 200px "a b c";.
Além disso, cada componente pode ser reordenado livremente. Não há uma ordem específica que você precise lembrar. Se você quiser fazer linhas, basta trocar column-reverse por row ou row-reverse. O restante da sintaxe permanece igual.
Com display: grid
Em display: grid, esses três aspectos precisam ser definidos separadamente:
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Assim como no exemplo de alvenaria, isso faz com que todas as colunas tenham o tamanho auto, mas se você quiser fornecer tamanhos explícitos, faça o seguinte:
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Ou se você quiser usar "grid" para definir tamanhos e nomes de área de uma só vez:
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
Em ambos os exemplos, a ordem é estritamente necessária e diferente se você quiser linhas. Por exemplo, mudar para linhas fica assim:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
Ou, para colocar tudo em um atalho:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
Pontos a considerar entre as duas opções
A abreviação display: masonry provavelmente será amplamente usada, já que é relativamente simples. Em muitos casos, para um layout de alvenaria "padrão", basta definir as definições de faixa. Todos os outros valores podem assumir o padrão.
A versão display: grid usa a abreviação grid, que é bastante complexa e, na nossa experiência, menos usada por desenvolvedores. Como mostrado nos exemplos anteriores, mesmo quando usado para layouts simples de alvenaria, é preciso ter cuidado ao definir a ordem dos valores.
Outras considerações
Esta postagem analisa alguns casos de uso comuns hoje, mas não sabemos o que o futuro reserva para grade ou alvenaria. Um grande argumento para usar a sintaxe separada
display: masonry é que ela permite que os dois divirjam no futuro. Em particular, com valores iniciais, como os de masonry-template-tracks, pode ser útil fazer algo diferente em alvenaria do que em grade. Não podemos mudar os padrões da grade se usarmos a versão display: grid, o que pode limitar o que queremos fazer no futuro.
Nesses exemplos, você pode ver lugares em que o navegador precisa ignorar propriedades válidas em grade ao usar alvenaria.
Por exemplo, grid-template-areas, em que a maioria dos valores é descartada porque define um layout de grade bidimensional. No alvenaria, definimos totalmente apenas uma direção.
Envie seu feedback
Confira estes exemplos e também o rascunho da especificação, que apresenta cada versão lado a lado. Deixe sua opinião no comentário do problema 9041 ou, se preferir escrever uma postagem no seu blog ou nas redes sociais, avise no X ou no LinkedIn.