The Mason's Undefined Joint: On the Empty Space That Unmakes a Layout

You’ve meticulously crafted your page. Your images have explicit dimensions, your fonts are properly loaded, your critical CSS is streamlined. The Lighthouse score shines a brilliant green. Yet, in the wild flicker of a browser tab, or the sudden jump of a newly-loaded comment section, the page shudders. Text you were about to click leaps from under your cursor. This jarring experience has a name: Cumulative Layout Shift (CLS). And more often than not, its most stubborn cause isn’t something present, but something absent: an undefined space.

Think of a master mason building a stone wall without mortar. Each block is perfectly cut, but if the mason leaves a gap where another, smaller stone should go, the entire structure above that gap is unstable. The moment that final, missing stone is slapped into place, everything above it must shift to accommodate it. The web browser is our mason, and the elements on the page are the stones. When we omit the ‘mortar’—the explicit dimensions for our dynamic content—we invite instability.

This undefined joint most often appears where content is injected after the initial page render. A hero image that loads without width and height attributes is the classic culprit, but the more insidious ones are the interactive modules: the ‘You May Also Like’ widget fetched from an API, the ad unit that loads a fraction of a second late, or the user avatar that pops in alongside a comment. We design for these elements, we leave a visual space for them in our mockups, but we fail to telegraph that intention to the browser itself. The browser, ever the literalist, only understands what it’s told. It sees the empty space not as a reserved plot of land, but as virgin territory, free for the taking by the content already in line. Then, when the tardy element finally arrives, the browser must evict the squatters, causing the entire subsequent layout to lurch downward or sideways.

The Discipline of Reservation

The solution is not to build less dynamic pages, but to build with a discipline of reservation. This means explicitly defining the space an element will occupy, even when its content is unknown at the time of the initial paint. For images, it’s the simple, often-forgotten act of setting `width` and `height` attributes in your HTML, allowing the browser to calculate the aspect ratio and hold the space. For more complex components, it’s using CSS techniques to create aspect ratio boxes or setting minimum heights that match the intended final state.

This feels counter-intuitive. We are taught to build fluidly, to avoid hard-coded sizes. But this is not about limiting flexibility; it’s about communicating intent. It’s the difference between telling the mason ‘a stone will go here eventually, so please account for a block of roughly this size,’ versus saying nothing and being surprised when the wall wobbles. By defining the joint, we grant the browser the foresight it lacks. We shift the responsibility for stability from the unpredictable timing of network requests to the predictable certainty of our initial design. The empty space becomes a promise of content, not a pitfall for the user’s attention. It is the quiet, proactive work that prevents the loud, reactive shift.

Notes & further reading

A few pages I came back to while writing this: