Layout
Grade de alturas variáveis
Masonry layout
Distribui itens de alturas variadas com pouco espaço vazio entre eles.
010203040506
Exemplo didático · Representação visual do padrão
Quando usar
Apresentar coleções visuais com proporções diversas.
Cuidados e acessibilidade
A ordem visual e a ordem do DOM podem divergir; escolha a implementação com cuidado.
Partes e comportamento
Colunas com itens de alturas diversas e ordem de leitura definida.
Não confunda
Uma grade regular alinha as linhas; masonry organiza alturas variadas em colunas.
Exemplo de código
.colecao { columns: 3 14rem; column-gap: 1rem; }
.item { break-inside: avoid; margin-bottom: 1rem; }
/* A leitura em colunas segue de cima para baixo. */Trecho didático. Integre e teste no contexto do seu projeto.