Publicado em: 23 de julho de 2025
As equipes do Microsoft Edge e do Google Chrome têm o prazer de anunciar que o CSS masonry está pronto para testes iniciais de desenvolvedores no Chrome e no Edge 140.
Como ainda há problemas em aberto relacionados à especificação e à sintaxe de alvenaria do CSS, seu feedback é essencial para nos ajudar a definir o formato final da API. Teste o recurso e diga o que achou.
Teste o CSS Masonry no Chromium hoje mesmo
Para testar o CSS Masonry hoje:
- Use o Chrome ou o Edge 140 ou mais recente (ou outro navegador baseado no Chromium com uma versão correspondente).
- Acesse
about:flagsem uma nova guia. - Pesquise "CSS Masonry Layout".
- Ative a flag.
- Reinicie o navegador.
Com o recurso ativado, você pode conferir o funcionamento dele acessando as demonstrações do Microsoft Edge (veja o código-fonte das demonstrações) ou continue lendo para saber mais sobre o recurso e a sintaxe disponível.
O que é alvenaria?
O masonry CSS é um modo de layout que permite criar uma disposição de itens semelhante a tijolos, de uma forma que não é facilmente alcançável com a grade CSS, o flexbox ou o layout de várias colunas.
O masonry CSS pode ser usado para organizar itens em um formato de coluna ou linha com itens colocados dentro dessas colunas ou linhas de maneira recolhida.
Pense na alvenaria como uma rodovia, em que a única restrição é o número e o tamanho das diferentes faixas de direção. Dentro das faixas, os veículos podem ter qualquer comprimento e sempre tentam ficar o mais próximo possível do destino, que é o início do layout em alvenaria.
Os itens de layout são restritos apenas em uma direção e podem se mover livremente ao longo da outra, independente de outros itens próximos. O masonry é diferente da grade porque as faixas são definidas apenas em uma direção.
No masonry, a ordem visual dos itens é menos importante do que o design final. Com o masonry, você aproveita ao máximo o espaço disponível, seja qual for o item. Isso o torna uma ótima opção para páginas visualmente intensas, em que a ordem visual do conteúdo não importa tanto quanto o resultado final.
Um aspecto interessante do masonry é que ele também permite que os itens abranjam várias faixas, assim como a grade. Quando isso acontece, os itens continuam sendo colocados de forma a preencher o máximo possível do espaço disponível.
Esse comportamento de posicionamento automático pode levar a resultados muito interessantes, que os web designers tentam alcançar há muito tempo. Por exemplo, confira a demonstração da galeria de fotos de Nova York, que mostra como as fotos podem ser exibidas de forma compacta em várias colunas, permitindo que determinados itens (o título neste exemplo) se estendam por várias colunas:
Confira alguns outros exemplos de uso do masonry.
Um layout de blog mostrando a miniatura e a descrição de cada postagem.
Um site de notícias, em que os artigos aparecem em colunas, alguns mais largos do que outros, e as imagens principais abrangem toda a largura da página.
Uma coleção de fotos com tamanhos de coluna diferentes e algumas fotos abrangendo várias colunas.
Soluções alternativas e limitações
Para implementar esse padrão de design na Web hoje, é necessário usar bibliotecas JavaScript ou soluções alternativas que usam grade CSS, flexbox ou várias colunas. No entanto, isso pode ter desvantagens, como:
- Performance pior: depender de bibliotecas JavaScript ou código personalizado para imitar a alvenaria CSS tem compensações de performance, o que pode levar a experiências negativas para o usuário.
- Maior complexidade do código:
- Garantir o posicionamento correto dos itens e a distribuição do espaço na grade CSS, no flexbox ou em várias colunas para imitar um layout de alvenaria CSS é difícil.
- O processamento de recursos específicos, como itens que abrangem mais de uma coluna ou linha, ordenação personalizada de itens ou ajuste à janela de visualização, também pode levar a complexidade e limitações.
- Maior carga de manutenção: é mais difícil manter códigos CSS ou JavaScript personalizados complexos.
A grade CSS é um modo de layout incrível, muito flexível, que permite criar vários estilos diferentes de layouts, seja para uma página da Web inteira, um componente ou apenas para alinhar itens individuais. No entanto, ele não tem as mesmas características do masonry.
Na grade CSS, as linhas e colunas são definidas rigidamente, e os itens só podem existir nas células da grade. Se você estiver tentando agrupar itens ao longo de um dos eixos, mas eles não estiverem dimensionados para caber nas respectivas células, será preciso escolher entre deixar lacunas entre os itens ou esticá-los para preencher o espaço vazio.
Assim como o masonry, o flexbox só se importa com uma direção e permite que os itens decidam o espaço que querem ocupar na outra direção. Isso significa que você pode ter um layout semelhante a um layout em alvenaria usando o flexbox, desde que você queira que os itens sejam dispostos na direção do bloco, uma coluna por vez. O contêiner flexível também precisa de um tamanho de bloco ou altura definidos para que os itens sejam ajustados em uma nova linha flexível, criando uma nova coluna.
O recurso de várias colunas também pode criar um layout semelhante a alvenaria, organizando os itens em colunas. Além disso, com várias colunas, não é possível dimensionar cada uma delas de maneira diferente. Todos têm o mesmo tamanho, enquanto o masonry oferece muita flexibilidade ao definir as faixas em que os itens são agrupados.
O ponto a ser lembrado aqui não é que layouts de grade, flexbox ou multicoluna sejam piores que o masonry. São ótimos tipos de layouts com muitos casos de uso. O ponto é: se você quer um layout em alvenaria, o CSS masonry é o que vai oferecer isso.
O estado do masonry do CSS
O Grupo de trabalho de CSS está criando um rascunho de alvenaria na especificação CSS Grid Level 3 (link em inglês). A especificação ainda está em construção e inclui temporariamente duas sintaxes diferentes. O primeiro usa uma nova palavra-chave para a propriedade display,
enquanto no segundo a alvenaria é integrada diretamente ao layout de grade CSS.
Usar display: masonry
Essa sintaxe apresenta o masonry do CSS como um tipo display próprio. Mais detalhes sobre a abordagem e a motivação podem ser encontrados na postagem do blog Precisamos de feedback: como devemos definir o masonry CSS? da equipe do Google Chrome, bem como na seção restante desta postagem. O protótipo atual no Chromium é baseado nessa proposta.
display: grid; grid-template-*: masonry;
Nessa sintaxe, o masonry do CSS é integrado diretamente à grade do CSS. O modo de alvenaria é acionado aplicando a palavra-chave masonry à definição grid-template-columns no caso de um layout de alvenaria baseado em linhas ou à definição grid-template-rows no caso de um layout de alvenaria baseado em colunas.
Mais detalhes sobre essa proposta e a motivação dela podem ser encontrados na postagem do WebKit Ajude a escolher a sintaxe final para Masonry em CSS.
Uma alternativa a essa proposta é a propriedade item-pack e a palavra-chave collapse, que acionaria o masonry do CSS em vez de usar uma das duas propriedades de modelo de grade.
Desde a publicação de postagens pelas equipes do Chrome e do WebKit, o CSSWG continuou as discussões sobre a sintaxe geral para avançar. Seu feedback pode ajudar a informar o desenvolvimento futuro nesses fóruns.
Para mais detalhes sobre o status atual das discussões, consulte o problema 11593, que descreve o conjunto atual de tópicos de discussão sobre a sintaxe de alvenaria, e o problema 11243 para um resumo do debate sobre a sintaxe até o momento.
Criar seu próprio layout em alvenaria CSS
Vamos nos divertir e criar um layout de alvenaria CSS.
Embora a sintaxe do CSS masonry ainda esteja em discussão, nossa implementação do recurso pode ser testada no Chromium hoje ativando a flag "Layout em masonry do CSS", conforme explicado em Teste o CSS masonry hoje. Os exemplos a seguir demonstram o que está disponível no teste para desenvolvedores.
Criar um contêiner de alvenaria
Para criar seu primeiro contêiner de alvenaria baseado em colunas, use display:masonry e defina os tamanhos das colunas usando grid-template-columns. Como masonry-direction tem como padrão column, definir essa propriedade é opcional.
.masonry {
display: masonry;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
Para um contêiner de alvenaria baseado em linhas, use display:masonry, defina os tamanhos de linha usando grid-template-rows e defina masonry-direction:row.
.masonry {
display: masonry;
masonry-direction: row;
grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
}
Como você deve ter percebido, essa sintaxe diverge um pouco da proposta original do Google. Independente do gatilho usado para o CSS Masonry, o grupo de trabalho do CSS decidiu reutilizar o dimensionamento e o posicionamento de modelos de grade dentro do layout do CSS Masonry.
Embora isso permita uma maior reutilização de propriedades entre tipos de layout, talvez você ache confuso. Gostaríamos de saber sua opinião sobre o assunto. Podemos criar mais aliases genéricos para propriedades como grid-template-columns e grid-template-rows, como template-columns ou template-rows, que podem ser usados para grade e alvenaria.
Usar o tamanho padrão da faixa
Com um novo tipo de exibição, surge a oportunidade de repensar os padrões de propriedade.
Na grade, grid-template-columns e grid-template-rows usam none como padrão, o que, conforme definido atualmente, normalmente resulta em uma única coluna ou linha. Para
alvenaria, esse padrão resultaria, na maioria das vezes, em um layout
indesejável.
A implementação no Chromium adiciona a definição proposta para none, que vai substituir o tamanho padrão da faixa no CSS masonry. O novo tamanho padrão da faixa é o valor repeat(auto-fill, auto). Esse valor cria um layout de alvenaria agradável sem precisar definir tamanhos de faixa:
.masonry {
display: masonry;
gap: 10px;
}
Como mostrado na imagem, o contêiner de alvenaria cria quantas colunas de tamanho automático forem necessárias para caber no espaço disponível.
Com a grade CSS, todos os itens são colocados antes do dimensionamento das faixas, o que significa que essa definição de dimensionamento automático não é possível. No entanto, com o CSS masonry, essa restrição não se aplica mais, já que o posicionamento e o dimensionamento são interligados e simplificados. Com essa restrição removida, podemos fornecer um tamanho padrão de faixa mais útil para layouts em alvenaria.
Teste a propriedade abreviada masonry
Como mencionado antes, a implementação atual no Chromium depende das propriedades
grid-template-* para definir a faixa de alvenaria no seu layout.
No entanto, como o masonry tem apenas uma dimensão, também implementamos a propriedade abreviada masonry, que pode ser usada para definir a direção do masonry e a definição de faixa de uma só vez, sem a propriedade prefixada grid- confusa.
Por exemplo, os dois snippets de código a seguir vão criar contêineres de alvenaria CSS equivalentes.
.masonry {
display: masonry;
masonry: "a a b" 50px 100px 200px row;
}
.masonry {
display: masonry;
masonry-direction: row;
grid-template-rows: 50px 100px 200px;
grid-template-areas: "a" "a" "b"
}
A abreviação masonry ainda está sendo discutida pelo grupo de trabalho do CSS. Faça um teste hoje e conte o que você achou.
Usar tamanhos de faixa personalizados
Ao definir tamanhos de faixa, o masonry é tão flexível quanto a grade, permitindo ajustar o número e os tamanhos das faixas de layout. As faixas de alvenaria também não precisam ter o mesmo tamanho. Por exemplo:
.masonry {
display: masonry;
masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}
Neste exemplo, definimos duas primeiras faixas de 3 rem, seguidas por um número variável de faixas de 5 rem e uma única faixa de 12 rem.
Abranger várias faixas
No masonry, os itens não precisam ser restritos às faixas em que são colocados, porque podem abranger várias faixas, se necessário. Isso pode ser muito útil quando alguns itens são mais importantes que outros e exigem mais espaço.
Exemplo:
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.important-item {
grid-column: span 2;
}
Você também pode usar essa capacidade para abranger várias faixas e fazer com que determinados itens ocupem todo o comprimento do contêiner:
.masonry {
display: masonry;
masonry: repeat(auto-fill, minmax(12rem, 1fr));
}
.full-bleed {
grid-column: 1 / -1;
}
É isso que a demonstração do site de notícias usa para mostrar o anúncio de assinatura nos artigos.
Ajuste da posição dos itens de alvenaria
No CSS Masonry, os itens são colocados na coluna ou linha com a posição de execução mais curta.
Imagine um contêiner de alvenaria de duas colunas. Se o contêiner tiver um item de 110 px de altura na primeira coluna e um item de 100 px de altura na segunda coluna, um terceiro item será colocado na segunda coluna, onde ficaria 10 px mais perto do início da direção de alvenaria.
Se você considerar uma diferença de 10 px na posição de execução pequena o suficiente para
seu caso e preferir que o terceiro item seja colocado na primeira coluna em vez disso,
para corresponder melhor à ordem de origem, use a propriedade item-tolerance.
A nova propriedade item-tolerance controla a sensibilidade na colocação de itens.
No exemplo anterior, é possível aplicar item-tolerance: 10px; ao contêiner para personalizar a variabilidade no posicionamento dos itens:
.masonry {
display: masonry;
masonry: 200px 200px;
gap: 10px;
item-tolerance: 10px;
}
A especificação de rascunho chama essa propriedade de item-slack. O Grupo de trabalho do CSS decidiu recentemente usar
item-tolerance como nome, e a especificação será atualizada em breve.
Outras propriedades disponíveis
Você pode usar as mesmas propriedades de dimensionamento e posicionamento de modelo para dimensionar e posicionar itens no eixo da grade de um contêiner de alvenaria, assim como com a grade CSS, como grid-row, grid-column, grid-area, grid-template-areas ou order.
Aproveite todo o poder da grade CSS ao criar seu layout em alvenaria.
Solicitação de feedback
Mal podemos esperar para que você conheça o masonry CSS, use a criatividade e descubra os novos recursos que ele pode ajudar você a desbloquear. Uma ótima maneira de começar é conferir nossas demonstrações e o código fonte delas e começar a criar seus próprios exemplos no Chromium. Não se esqueça de ativar a flag primeiro.
Seu feedback é importante para nos ajudar a moldar a API e verificar se ela foi projetada para atender às suas necessidades na Web. Teste o masonry e diga o que achou.
Se você tiver ideias ou feedback sobre o formato da API, deixe um comentário no problema 11243. Se preferir escrever uma postagem no seu blog ou nas redes sociais, avise no X ou no LinkedIn.
O masonry do CSS ainda está sendo implementado no Chromium. Se você testar, saiba que ainda estamos trabalhando ativamente nele e que você pode encontrar casos em que ele não se comporta como esperado. Algumas das limitações atuais incluem empacotamento denso, posicionamento invertido, suporte a subgrade, suporte fora do fluxo, suporte a linha de base, suporte a DevTools, suporte a fragmentação, suporte a decoração de lacunas, entre outros.
Se você encontrar um bug ao testar o recurso, compartilhe seu feedback abrindo um novo bug do Chromium.