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

**URL:** <https://forum.kirupa.com/t/why-does-my-layout-still-shift-even-when-i-reserve-space-for-images/681690>\
**Category:** web dev\
**Created:** [May 22, 2026, 7:00am UTC](https://forum.kirupa.com/t/why-does-my-layout-still-shift-even-when-i-reserve-space-for-images/681690 "2026-05-22T07:00:26Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [May 22, 2026, 7:00am UTC](https://forum.kirupa.com/t/why-does-my-layout-still-shift-even-when-i-reserve-space-for-images/681690/1 "2026-05-22T07:00:26Z")

</div>

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).

```html
<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?

---

<div class="post-metadata">

**Author:** ![sora](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sora/32/31259_2.png) [@sora](https://forum.kirupa.com/u/sora)\
**Post date:** [May 23, 2026, 8:20am UTC](https://forum.kirupa.com/t/why-does-my-layout-still-shift-even-when-i-reserve-space-for-images/681690/2 "2026-05-23T08:20:23Z")

</div>

`aspect-ratio` is doing its job. The box is there.

What usually shifts is the text block next to it. A webfont landing late can change line wraps in the `<h3>` or `<p>`, so the grid row gets taller after first paint. Under CPU throttle, that delay is just easier to see.

I’ve chased this before in a feed and it ended up being the font, not the image. Check whether that view is loading a custom font, and try a fallback with similar metrics so the text doesn’t breathe as much.