我想这会解决你的问题。

.wrapper {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr 478px;
  grid-template-areas:
    'Images Details'
    'Tabs Tabs';
}

.child1 {
  grid-area: Images;
  display: flex;
  flex-wrap: wrap;
}

.child1 img {
  width: 350px;
  height: 200px;
  margin-bottom: 16px;
}

.child2 {
  grid-area: Details;
  position: sticky;
  top: 0;
}

.child3 {
  grid-area: Tabs;
}

.child2 img {
  width: 350px;
  height: 200px;
  margin-bottom: 16px;
}

你所要求的解决方案不能用纯css和html来实现，但是你可以用一些JavaScript来实现：

window.addEventListener('DOMContentLoaded', () => {
  const images = document.querySelector('.child1');
  const details = document.querySelector('.child2');

  const handleScroll = () => {
    const imagesRect = images.getBoundingClientRect();
    const detailsHeight = details.offsetHeight;

    if (imagesRect.bottom - detailsHeight < 0) {
      details.style.position = 'absolute';
      details.style.top = `${images.offsetHeight - detailsHeight}px`;
    } else {
      details.style.position = 'sticky';
      details.style.top = '0';
    }
  };

  window.addEventListener('scroll', handleScroll);
});