在我的网站上，我有一个标签列表，我想以砖石样式的布局显示这些标签，这些标签的行定义清晰，但没有列定义。这可以通过以下方式轻松实现：flex-wrap: wrap单独操作，如下所示：
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>我遇到的问题是，右边距上往往会有一个装订线，行从那里无法填满。对于一两行来说，这没什么问题，但往往相当一致，每十几行中就有一行是“满的”。请原谅我画得很糟糕，但这是我快速尝试说明这一点的方法：
你可以想象，如果你垂直复制这张图片几次，右侧就会出现非常明显的边缘，与左边距的内容形成鲜明对比，造成不平衡。
如果我理解正确的话，这是一个已知问题，并且CSS Masonry 规范（如果有任何进展）将尝试解决，但目前有任何解决方案吗？以某种方式调整每行，还是自动边距？不确定，有点无稽之谈。如果有比flex-wrap实现此目标更好的方法，我很乐意切换到其他方法，但我所看到的一切grid似乎都是关于明确定义的列和行，而这正是我所不知道的。