如何实现Airbnb式横向图片网格并保持图片比例？

我想实现类似Airbnb的图片网格，但要横向排列而非纵向。已经成功复现纵向网格，但改成横向占满容器宽度时，图片没法保持原有比例。
之前的问题因为参考固定布局方案被关闭，但我的网格是完全动态的，没法提前知道要展示的图片类型（竖图、横图）和顺序。
每个gridPart容器最多放3张图片，我预设了4种模板，可参考下面的代码片段。计划用JavaScript统计每组3张图片里竖图和横图的数量，以此确定展示方式。

代码片段 #

CSS 样式 #

.container {
  max-width: 800px;
  margin: 0 auto;
}

.grid {
  display: grid !important;
  gap: 8px !important;
  grid-auto-columns: 1fr !important;
  grid-template-rows: 1fr !important;
}

.gridPart {
  display: grid !important;
  gap: 8px !important;
  grid-auto-columns: 1fr !important;
  grid-auto-rows: 1fr !important;
}

.imgWrapper {
  height: 100%;
  position: relative;
  width: 100%;
}

.imgWrapper img {
  position: absolute;
  top: 0;
  color: white;
  width: 100%;
  vertical-align: bottom;
  max-width: 100% !important;
}

HTML 结构 #

<div class="container">
  <div class="grid">
    <div class="gridPart" style="grid-area: 1 / 1 / auto/ auto">
      <div style="grid-area: 1 / 1 / span 2 / 2;border:solid green 1px;">
        <div class="imgWrapper">
          <div style="padding-bottom:142.857142857142857%"></div>
          <img src="http://placekitten.com/g/140/200" />
        </div>
      </div>
      <div style="grid-area: 1 / 2 / 1 / 2;border:solid orange 1px;">
        <div class="imgWrapper">
          <div style="padding-bottom:70%"></div>
          <img src="http://placekitten.com/g/200/140" />
        </div>
      </div>
      <div style="grid-area: 2 / 2 / auto / auto;border:solid violet 1px;">
        <div class="imgWrapper">
          <div style="padding-bottom:70%"></div>
          <img src="http://placekitten.com/g/200/140" />
        </div>
      </div>
    </div>
    <div class="gridPart" style="grid-area: 1 / 2 / auto/ auto">
      <div style="grid-area: 1 / 1 / 1 / 1;border:solid green 1px;">
        <div class="imgWrapper">
          <div style="padding-bottom:142.857142857142857%"></div>
          <img src="http://placekitten.com/g/140/200" />
        </div>
      </div>
      <div style="grid-area: 1 / 2 / 1 / 3;border:solid orange 1px;">
        <div class="imgWrapper">
          <div style="padding-bottom:70%"></div>
          <img src="http://placekitten.com/g/140/200" />
        </div>
      </div>
      <div style="grid-area: 1 / 3 / 1 / 4;border:solid violet 1px;">
        <div class="imgWrapper">
          <div style="padding-bottom:70%"></div>
          <img src="http://placekitten.com/g/140/200" />
        </div>
      </div>
    </div>
    <div class="gridPart" style="grid-area: 1 / 3 / auto/ auto">
      <div style="grid-area: 1 / 1 / span 1 / 2;border:solid green 1px;">
        <div class="imgWrapper">
          <div style="padding-bottom:142.857142857142857%"></div>
          <img src="http://placekitten.com/g/140/200" />
        </div>
      </div>
      <div style="grid-area: 1 / 2 / span 1 / 2;border:solid orange 1px;">
        <div class="imgWrapper">
          <div style="padding-bottom:142.857142857142857%"></div>
          <img src="http://placekitten.com/g/140/200" />
        </div>
      </div>
      <div style="grid-area: 2 / span 2 / auto / auto;border:solid violet 1px;">
        <div class="imgWrapper">
          <div style="padding-bottom:70%"></div>
          <img src="http://placekitten.com/g/200/140" />
        </div>
      </div>
    </div>
    <div class="gridPart" style="grid-area: 1 / 4 / auto/ auto">
      <div style="grid-area: 1 / 1 / 1 / 1;border:solid green 1px;">
        <div class="imgWrapper">
          <div style="padding-bottom:70%"></div>
          <img src="http://placekitten.com/g/200/140" />
        </div>
      </div>
      <div style="grid-area: 2 / 1 / 2 / 1;border:solid orange 1px;">
        <div class="imgWrapper">
          <div style="padding-bottom:70%"></div>
          <img src="http://placekitten.com/g/200/140" />
        </div>
      </div>
      <div style="grid-area: 3 / 1 / 3 / 1;border:solid violet 1px;">
        <div class="imgWrapper">
          <div style="padding-bottom:70%"></div>
          <img src="http://placekitten.com/g/200/140" />
        </div>
      </div>
    </div>
  </div>
</div>

预期效果 #

内容的提问来源于stack exchange，提问作者akio