CSS Grid中实现单列单行区域粘性定位的问题

我在CSS Grid布局里遇到了单个区域粘性定位的问题，现有代码如下：

.wrapper {
    display: grid;
    gap: 32;
    grid-template-columns: 1fr 478px;
    grid-template-areas:
        'Images Details'
        'Tabs Tabs';
}
.child1 {
    grid-area: Images;
}
.child2 {
    align-self: flex-start;
    grid-area: Details;
    position: sticky;
    top: 0;
}
.child3 {
    grid-area: Tabs;
}

其中Images区域高度远大于Details区域，我想要Details区域向下滚动时保持粘性，但滚动到Images区域底部时停止移动。不过现在Details区域因为相对于wrapper粘性，会覆盖Tabs区域，该怎么修复？

修复方案 #

核心问题是sticky元素的父级是整个grid容器wrapper，而wrapper的高度被Images区域拉得很高，导致sticky元素会一直粘到wrapper底部，进而覆盖Tabs。要解决这个问题，需要把Details和Images限制在同一个高度由Images决定的容器内，让sticky元素的粘性范围被限定在这个容器里。

方案一：基于Grid原生结构调整

利用display: contents保持Grid布局结构，同时将Images和Details绑定到同一行轨道，让sticky元素的粘性范围受限于该行高度：

.wrapper {
    display: grid;
    gap: 32px; /* 补上单位，原代码gap:32无效果 */
    grid-template-columns: 1fr 478px;
}
/* 新增容器包裹顶部两个区域，不生成额外盒子 */
.top-row {
    display: contents;
}
.child1 {
    grid-column: 1;
    grid-row: 1;
}
.child2 {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 0;
    align-self: start;
}
.child3 {
    grid-column: 1 / -1; /* 占满所有列 */
    grid-row: 2;
}

方案二：拆分布局结构

将顶部区域单独做成Grid容器，整体用Flex垂直排列，让sticky元素的父级高度由Images区域决定：

.wrapper {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.top-row {
    display: grid;
    grid-template-columns: 1fr 478px;
    gap: 32px;
}
.child1 {
    /* 保留原有样式 */
}
.child2 {
    position: sticky;
    top: 0;
    align-self: start;
}
.child3 {
    /* 保留原有样式 */
}

关键说明 #

• 两种方案都限制了sticky元素的粘性范围，当滚动到Images区域底部时，sticky元素会随该行容器一起停止，不会覆盖下方的Tabs。
• 原代码中gap:32缺少单位，需补充px或其他有效单位，否则间隙设置不生效。

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