Css 是否可能将位置粘性行为限制在特定的网格行？

我有一个基本的2列布局：一个用于图像，一个用于文本。由于文本列可能会变得很长，我希望图像可以滚动。我可以用

的position:sticky轻松做到这一点，但最后有一个跨越两列的第三个容器。由于这三个元素都在同一个网格中，因此
位置的图像：粘性与第三个容器重叠

有没有办法将图像限制在第一个网格行，而不使用JS或添加其他容器

例如：
.element-1
是我要限制在第一个网格行中的元素



.grid容器{
显示：网格；
网格模板柱：1fr 1fr；
网格间距：2米；
对齐项目：开始；
}
.要素-1{
最小高度：10vh；
网格行：1；
网格柱：1/2；
位置：粘性；
顶部：1米；
背景：红色；
}
.要素2{
最小高度：100vh；
网格行：1；
网格柱：2/3；
背景：蓝色；
}
.要素-3{
最小高度：100vh；
网格行：2；
网格柱：1/3；
背景：黄色；
}

.grid容器{
显示：网格；
网格模板柱：1fr 1fr；
网格间距：2米；
对齐项目：开始；
}
.要素-1{
最小高度：10vh；
网格行：1；
网格柱：1/2；
位置：粘性；
顶部：1米；
背景：红色；
}
.要素2{
最小高度：100vh；
网格行：1；
网格柱：2/3；
背景：蓝色；
}
.要素-3{
最小高度：100vh；
网格行：2；
网格柱：1/3；
背景：黄色；
位置：粘性；
}


.grid容器{
显示：网格；
网格模板柱：1fr 1fr；
网格间距：2米；
对齐项目：开始；
}
.要素-1{
最小高度：10vh；
网格行：1；
网格柱：1/2；
位置：粘性；
顶部：1米；
背景：红色；
}
.要素2{
最小高度：100vh；
网格行：1；
网格柱：2/3；
背景：蓝色；
}
.要素-3{
最小高度：100vh；
网格行：2；
网格柱：1/3；
背景：黄色；
位置：粘性；
}
Hmmm我将使用元素-1作为单元格，并在其中粘贴一些东西。像这样


.要素-1{
网格行：1；
网格柱：1/2；
align self:stretch；//因此它是可用高度的100%
}
.元素-1.粘性{
位置：粘滞；//使此元素粘滞
顶部：1米；
背景：红色；
高度：10vh；
}

使
.element-1
粘滞的问题在于，它是相对于网格的，如果使子元素粘滞，则子元素是相对于
定位的。element-1
Hmmm我将使用element-1作为单元格，并在其中粘贴一些东西。像这样


.要素-1{
网格行：1；
网格柱：1/2；
align self:stretch；//因此它是可用高度的100%
}
.元素-1.粘性{
位置：粘滞；//使此元素粘滞
顶部：1米；
背景：红色；
高度：10vh；
}

使
.element-1
粘性的问题在于它与网格相关，如果将子项设置为粘滞，则子项相对于
.element-1
答案定位，这些答案解释了对代码所做的更改以及这些更改的原因，通常比只显示代码的答案被否决的次数少。解释了对代码所做的更改以及这些更改的原因的答案通常被否决比那些只显示代码的要少。
<div class="element-1">
  <div class='sticky'>
  </div>
</div>

.element-1 {
  grid-row: 1;
  grid-column: 1 / 2;
  align-self: stretch; //so it's 100% of the available height
}
.element-1 .sticky {
  position: sticky; //make this element sticky
  top: 1em;
  background: red;
  height: 10vh;
}