如何实现列垂直适配高度、列内元素非水平对齐的新闻布局？

我绘制了所需布局的草图：

核心问题：
如何让文章“4”和“5”根据其上方文章（“2”和“3”）的高度自适应位置，且二者不水平对齐？

• CSS Grid：可实现5个元素的定位，但元素“4”和“5”始终保持水平对齐，不会随“2”和“3”的高度变化调整位置，无法满足高度自适应需求。
• CSS Flex：同样能完成元素定位，但存在和Grid一样的高度对齐问题。即使使用align-items、align-self属性，也无法让“4”和“5”根据上方元素高度自动上移。
• Masonry布局（CSS columns实现）：采用如下代码实现：

.masonry { /* Masonry容器 */
  column-count: 4;
  column-gap: 1em;
}

.item { /* Masonry子元素 */
  background-color: #eee;
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
}

但该方案会让元素在列内垂直排序，而新闻网站要求元素必须按水平顺序展示，因此不符合需求。

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