Javascript HTML-在多行中调整图像以适应视口

我正在开发一个网站，在其中我显示N个数量的图像。我想展示它们的一个很好的例子是how Do it。图像以行的方式显示，以填充当前视口的宽度，并且不会使任何图像变形

我的尝试如下：

#CSS
.项目{
显示：内联块；
垂直对齐：顶部；
位置：相对位置；
溢出：隐藏；
填充：0.5em；
背景：轻珊瑚；
边框：黑色实心1px；
}
.项目img{
最大高度：200px；
对象匹配：按比例缩小；
}

HTML
{{i.title}}
按用户1234

其结果如下：

如您所见，每行的末尾都留有间隙。我希望每一行能够适合所有可能的图像，以便网格适合视口，如下所示：

---

我很想知道如何实现这一点，如果需要，可以使用纯HTML/CSS或Javascript。

您可能希望使用flexbox和flex grow。 CSS技巧在这里有一篇很好的文章：

以下是文章中的代码笔：

---

看起来很棒！水平砌体看起来是一个很好的解决方案，谢谢安德鲁！

    body {
  margin: 0;
  padding: 1rem;
}

.masonry-with-columns {
  display: flex;
  flex-wrap: wrap;
  div {
    height: 150px;
    line-height: 150px;
    background: #EC985A;
    color: white;
    margin: 0 1rem 1rem 0;
    text-align: center;
    font-family: system-ui;
    font-weight: 900;
    font-size: 2rem;
    flex: 1 0 auto;
  } 
  @for $i from 1 through 36 { 
    div:nth-child(#{$i}) {
      $h: (random(400) + 70) + px;
      width: $h;
    }
  }
}