.tip

A page of two hundred cards pays layout and paint for all of them on first render, while the reader sees four. content-visibility: auto lets the browser skip that work for anything off screen and do it when the card scrolls close.

.card {
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}

contain-intrinsic-size is the part people leave out: without it a skipped card is zero tall and the scrollbar jumps as you scroll. The auto keyword remembers the real height once a card has rendered. Leave it off anything above the fold.