Why does my layout still shift even when I reserve space for images?

programming web dev
1

Yo Kirupa folks, I’m in the middle of tuning a feed UI and I’m trying to kill a nasty CLS issue that only shows up when the browser is busy (throttled CPU makes it obvious).

<div class="card">
  <img class="thumb" src="/img/123.jpg" alt="" loading="lazy" />
  <div class="meta">
    <h3>Title</h3>
    <p>Some text that wraps differently per card</p>
  </div>
</div>

<style>
.card { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.thumb { width: 96px; aspect-ratio: 1 / 1; object-fit: cover; }
</style>

If aspect-ratio is reserving the image box, what else in the render pipeline would still cause visible shifting here (fonts, grid sizing, lazy loading behavior, something else), and what’s the most reliable way to lock this down?

1 Like