如何用Flex/Grid实现动态行高两列布局并填充间隙广告Tile

我尝试用HTML Grid或Flexbox实现一个两列布局容器，其中每个行项的高度是动态的，当布局中出现间隙时，需要用原列表以外的新行项（广告Tile）填充这些间隙。

示例1：所有图片高度一致的场景 #

假设我有6个列表项，要在两列容器中展示，代码如下：

CSS代码 #

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.column {
  flex-basis: 50%;
}

HTML代码 #

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <img src="https://revistacarro.com.br/wp-content/uploads/2021/03/aston-vantage-safety-car.jpg" alt="Girl in a jacket" width="100" height="100">
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="https://revistacarro.com.br/wp-content/uploads/2021/03/aston-vantage-safety-car.jpg" alt="Girl in a jacket" width="100" height="100">
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="https://revistacarro.com.br/wp-content/uploads/2021/03/aston-vantage-safety-car.jpg" alt="Girl in a jacket" width="100" height="100">
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="https://revistacarro.com.br/wp-content/uploads/2021/03/aston-vantage-safety-car.jpg" alt="Girl in a jacket" width="100" height="100">
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="https://revistacarro.com.br/wp-content/uploads/2021/03/aston-vantage-safety-car.jpg" alt="Girl in a jacket" width="100" height="100">
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="https://revistacarro.com.br/wp-content/uploads/2021/03/aston-vantage-safety-car.jpg" alt="Girl in a jacket" width="100" height="100">
  </div>
</div>

示例2：图片高度不一致的实际场景 #

实际使用中图片高度可能不同，示例代码如下：

CSS代码 #

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.column {
  flex-basis: 50%;
}

HTML代码 #

<div class="row">
  <div class="column" style="background-color:#aaa;">
    <img src="https://revistacarro.com.br/wp-content/uploads/2021/03/aston-vantage-safety-car.jpg" alt="Girl in a jacket" width="100" height="100">
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="https://revistacarro.com.br/wp-content/uploads/2021/03/aston-vantage-safety-car.jpg" alt="Girl in a jacket" width="100" height="50">
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="https://revistacarro.com.br/wp-content/uploads/2021/03/aston-vantage-safety-car.jpg" alt="Girl in a jacket" width="100" height="100">
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="https://revistacarro.com.br/wp-content/uploads/2021/03/aston-vantage-safety-car.jpg" alt="Girl in a jacket" width="100" height="50">
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="https://revistacarro.com.br/wp-content/uploads/2021/03/aston-vantage-safety-car.jpg" alt="Girl in a jacket" width="100" height="100">
  </div>
  <div class="column" style="background-color:#bbb;">
    <img src="https://revistacarro.com.br/wp-content/uploads/2021/03/aston-vantage-safety-car.jpg" alt="Girl in a jacket" width="100" height="100">
  </div>
</div>

需求说明 #

我希望行项不会占用整行高度，能像瓷砖一样紧凑排列；额外要求是在列的末尾（左侧或右侧均可）的间隙中填充一个新的广告Tile。

以下是预期效果示例：

提前感谢帮助！

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