Layout shift prevention with CQ

Reserve space for dynamic content using container queries — no JavaScript required.

Container: card

Jamie Rivera

@jamierivera

Using container queries to define layout rules that adapt to available space, preventing shifts when content loads dynamically.

1.2k Posts

856 Followers

2.3k Following

Widely supported

layoutno-js

Quick implementation

/* HTML: <div class="card">...</div> */

.card {
  /* Declare this element as a container */
  container-type: inline-size;
  container-name: card;
}

/* Default layout for larger containers */
.card-content {
  min-height: 4rem;
}

/* Adapt when container is smaller — prevents shifts */
@container card (max-width: 280px) {
  .card-content {
    min-height: 3.5rem;
    font-size: 0.85rem;
  }
  .card-stats {
    flex-direction: column;
    gap: 0.5rem;
  }
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a senior frontend engineer specializing in layout stability.

Goal: Build a card component that prevents layout shifts when dynamic content loads, using container queries.

Technical constraints:
- Use container-type: inline-size on the parent to establish a container.
- Define @container rules that adapt layout at specific breakpoints (e.g., 280px, 320px).
- Use oklch() for all colors — no hex or rgba().
- Reserve min-height on content areas to prevent shifts when text/images load.
- Add focus-visible styles for keyboard accessibility.

Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept children, className props; container width can be set via style or data attribute.

Edge cases to handle:
- What happens if container queries aren't supported? Provide a fallback using @supports or media queries.
- Handle the case where dynamic content exceeds the reserved space (overflow handling).
- Screen reader consideration: ensure the layout doesn't rely on visual ordering alone.

Return HTML + CSS with clear comments explaining the container query breakpoints.

Why this matters in 2026

Layout shift is still the silent killer of user experience. Traditional responsive design with @media queries reacts to viewport size, not to the space actually available to a component. Container queries let you define layout rules based on the parent's size, so dynamic content (comments, recommendations, ads) can load without pushing surrounding elements around. This is the CSS-native alternative to the old JavaScript resize observers and manual class toggling.

The logic

container-type: inline-size declares an element as a container that other elements can query. The @container card (max-width: 280px) rule then applies styles when that container is narrower than 280px — regardless of viewport size. By reserving min-height on content areas and defining adaptive layouts upfront, you prevent the browser from recalculating positions when dynamic content loads.

Why this prevents shifts: Instead of waiting for content to load and then reflowing the layout, container queries let you define multiple layout states. The browser knows exactly how to render the component at any container width, so there's no jarring reflow when an image or API response arrives.

Accessibility & performance

Layout shifts disorient users, especially those relying on screen readers or with motor impairments. Preventing them is an accessibility win. Container queries run on the compositor thread — they don't trigger expensive layout recalculations. For older browsers, provide a @supports not (container-type: inline-size) fallback using traditional media queries, or accept that some shifts may occur on those platforms.

Tip: Always reserve min-height or use aspect-ratio for dynamic content areas. This gives the browser a box to work with before the content arrives.