The Scribe's First Unsized Vellum: On the Unruly Codex of a Perfectly Set Container Query

There’s a small miracle in the Bodleian Library, a ninth-century copy of Boethius’s De consolatione Philosophiae. The vellum pages are thick, rough-hewn, and no two are exactly the same size. The medieval scribe who labored over it faced a problem we’d recognize instantly: how to lay out a complex text on a material of inconsistent dimensions. His solution was a system of pricking and ruling, using a sharp stylus to score faint guidelines onto the animal skin before he began to write. These lines gave structure, ensuring his script remained orderly and legible, no matter the quirky shape of the page he was working on. It was a fixed grid, meticulously applied, but it was a grid bound to a single, predetermined context: the specific, physical page in front of him.

For years, our approach to web layout was not so different. We became masters of the viewport. We used media queries to react to the window’s dimensions, creating breakpoints as if we were the scribe, but one who could only adjust his script based on the size of the reader’s library window, not the book in his hands. A component, plucked from the sidebar and dropped into a main column, would either break or remain stubbornly, awkwardly fixed in its original form. Our guidelines were scored for the window, not for the container. We lacked the scribe’s ability to rule the vellum itself.

The Dream of the Self-Aware Component

Container queries propose a different kind of craftsmanship. They are the tools for scoring guidelines directly onto the component’s own ‘vellum’. A card, a media object, a navigation block—each can now have an intrinsic understanding of its own dimensions and adjust its internal layout accordingly. This is a profound shift from designing for the room the book is read in, to designing for the page the text is written on. The component becomes a self-contained codex, literate in its own context.

But this new power, like any untested tool, has its own subtle failure mode. The initial implementation can feel perfect. You define the container, you write the query, and in isolation, the component elegantly morphs from a horizontal layout to a stacked one as its width shrinks. The craftsmanship seems impeccable. Yet, the first ‘unsized vellum’ appears when the component is nested, or when its container’s size is influenced by something unexpected—a late-loading font, a sibling element with erratic content, or a complex grid algorithm. The container query, so logically sound, begins to fire at the wrong moments. The layout shifts not because the viewport changed, but because the component’s own housing experienced a tremor we failed to anticipate.

This is the modern equivalent of the scribe’s vellum stretching or shrinking with the humidity after the ruling was done. Our containers are not always the static, predictable elements we imagine in the clean room of a design tool. They live in the dynamic, often messy, environment of the DOM. A perfectly set container query without a stable container is like those exquisite, unwavering guidelines on a piece of leather that warps in the sun. The internal logic is flawless, but the foundation it’s built on has a mind of its own.

The lesson, then, is not just to master the new syntax, but to deepen our understanding of the material we’re working with. It forces us to consider containment as a holistic property, to ensure our components are housed in a stable, predictable context before we bestow upon them the intelligence to rearrange their own interiors. The true craft lies not in the query itself, but in preparing the vellum to receive it—creating a container with the dimensional stability worthy of the sophisticated layout it will hold. It’s a return to the scribe’s first principle: the quality of the guideline is entirely dependent on the preparation of the surface.

Notes & further reading

A few pages I came back to while writing this: