使粘性元素粘在flexbox网格中的行内

Question

考虑一段HTML：

<div class="article">
  <div class="section">
    <div class="title"></div>
    <div class="paragraphs">
      <div class="p"></div>
      <div class="p"></div>
    </div>
  </div>
  <div class="section">
    <div class="title"></div>
    <div class="paragraphs">
      <div class="p"></div>
      <div class="p"></div>
    </div>
  </div>
</div>

“文章”是2列的网格，“标题”是粘性的：

.article {
  display: grid;
  grid-template-columns: auto 1fr;
}

.title {
  place-self: start;
  position: sticky;
  top: 0;
}

我遇到的问题是，对于“位置：粘性”元素，边界由其父元素定义，该父元素是长而长的“ .article”。因此，当我向下滚动时，这些元素会重叠。

一个简单的解决方案是将背景色应用于“ .title”。这是可行的，但可能会更好。所以问题是，是否存在任何已知的方法来使元素粘在网格的行中？

请参见the Codepen。

作为一个示例，我试图使用“ display：grid”实现的是another Codepen，它使用了“ display：flex”和一层更深的元素层次。它仍然有效，但我对网格+粘滞情况感到好奇。