No meu site, tenho uma lista de tags que gostaria de exibir em um layout de estilo masonry, com linhas claramente definidas, mas sem colunas definidas. Isso pode ser facilmente alcançado por: flex-wrap: wrapsozinho, como mostrado aqui:
body {
background-color: red;
}
.wrapper {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: .25rem;
width: 12rem;
background-color: lime;
}
.wrapper > div {
color: white;
background-color: black;
padding: .25rem;
border-radius: .25rem;
}<div class="wrapper">
<div>Lorem</div>
<div>ipsum</div>
<div>dolor</div>
<div>sit</div>
<div>amet</div>
<div>consectetur</div>
<div>adipiscing</div>
<div>elit</div>
<div>Duis</div>
<div>lobortis</div>
<div>tempor</div>
<div>mauris</div>
<div>vitae</div>
<div>ornare</div>
</div>O problema que estou enfrentando é que tende a haver uma calha na margem direita, de onde a linha não preencheu. Isso seria bom para uma ou duas linhas, mas tende a ser bem consistente, com 1 linha em uma dúzia sendo "cheia". Desculpe o desenho horrível, mas aqui está minha rápida tentativa de ilustrar isso:
Como você pode imaginar, se você duplicar esta imagem algumas vezes verticalmente, há uma sarjeta bem óbvia no lado direito, o que cria um desequilíbrio com o conteúdo que se estende até a margem esquerda, em contraste.
Se entendi corretamente, esse é um problema conhecido, e algo que a especificação CSS Masonry , se progredir, tentará abordar, mas há alguma solução no momento? Justificar por linha de alguma forma, ou uma margem automática? Não tenho certeza, estou um pouco me agarrando a palhas. Fico feliz em mudar para outros métodos se houver uma maneira melhor do que flex-wrappara conseguir isso, mas tudo que vi gridparece ser sobre colunas e linhas bem definidas, que é precisamente o que eu não quero.