使用CSS Grid实现粘性卡片布局的问题求助

我用CSS Grid实现粘性卡片布局，代码如下：

HTML #

<div class="cards">
    <div class="card" style="background-color: rgb(252 165 165);">1</div>
    <div class="card" style="background-color: rgb(147 197 253);">2</div>
    <div class="card" style="background-color: rgb(134 239 172);">3</div>
    <div class="card" style="background-color: rgb(253 224 71);">4</div>
    <div class="card" style="background-color: rgb(249 168 212);">5</div>
</div>

CSS #

:root {
    --card-top-offset: 3rem;
    --card-h: 36rem;
}

.cards {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: calc(var(--card-h) / 2);
    align-items: baseline;
}

.card {
    position: sticky;
    top: 0;
    height: var(--card-h);
    transition: all 0.5s;
}

JavaScript #

for (const cards of document.querySelectorAll(".cards")) {
    let i = 0;
    for (const card of cards.children) {
        if (card.classList.contains("card")) {
            card.style.top = `calc(5vh + ${i} * var(--card-top-offset))`;
            i += 1;
        }
    }

    cards.style.setProperty(
        "grid-template-rows",
        `repeat(${i}, var(--card-h))`,
    );
}

当前前4张卡片粘性表现正常，但第5张卡片的粘性定位提前失效，推测是父元素.cards高度不足导致的。请问有没有无需硬编码元素高度、纯用CSS Grid实现该效果的方法？

你的推测正确：父元素.cards的高度由固定行高--card-h和gap计算得出，滚动到第5张卡片时，父元素剩余高度不足以支撑其完成粘性定位，导致提前失效。以下是无需硬编码高度的实现方案：

1. 自适应卡片高度方案 #

移除固定高度变量，让卡片高度随内容自适应，同时用CSS变量管理粘性偏移：

修改后CSS

:root {
    --card-top-offset: 3rem;
}

.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--card-top-offset);
    align-items: start;
}

.card {
    position: sticky;
    top: calc(5vh + var(--card-index) * var(--card-top-offset));
    transition: all 0.5s;
    /* 可选：设置最小高度避免内容过短 */
    min-height: 20rem;
}

修改后JavaScript

for (const cards of document.querySelectorAll(".cards")) {
    Array.from(cards.children).forEach((card, index) => {
        if (card.classList.contains("card")) {
            card.style.setProperty('--card-index', index);
        }
    });
}

2. 等高度卡片方案（无硬编码） #

如果需要保持卡片高度一致但不想硬编码值，可通过父元素内边距确保最后一张卡片的粘性空间：

示例CSS

:root {
    --card-top-offset: 3rem;
}

.cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--card-top-offset) * 2);
    align-items: start;
    /* 底部内边距确保最后一张卡片能完成粘性定位 */
    padding-bottom: 100vh;
}

.card {
    position: sticky;
    top: calc(5vh + var(--card-index) * var(--card-top-offset));
    min-height: 30rem;
    transition: all 0.5s;
}

核心逻辑说明 #

• 用CSS变量--card-index替代JS直接设置top值，逻辑更清晰；
• 移除硬编码的--card-h，改用min-content或min-height实现高度自适应/可控；
• 父元素添加padding-bottom: 100vh（或动态计算值），确保最后一张卡片滚动时，父元素有足够高度支撑粘性定位。

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