CSS липкие карты с использованием сетки ⇐ CSS

[Anonymous]

Я хочу иметь макет липких карточек с использованием сетки. Вот чего мне удалось добиться:


< pre class="lang-html Prettyprint-override">

Код: Выделить всё

1
2
3
4
5

Код: Выделить всё

: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;
}

Код: Выделить всё

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))`,
);
}

Первые четыре карты работают нормально, однако пятая отклеивается раньше, чем я ожидал. Я думаю, это связано с тем, что родительский элемент card заканчивается. Есть ли способ добиться такого поведения с помощью CSS-сетки? Я нашел несколько других подходов, но они включали жесткое кодирование определенных высот для некоторых элементов, и я бы хотел этого избежать.


Подробнее здесь: https://stackoverflow.com/questions/787 ... rid-layout