Home / Snippets / Layout /

Spacing adapts to container

Container query-driven spacing that scales with parent width — no media queries needed.

1
Card one
Spacing adjusts as container grows
2
Card two
Gap increases at wider breakpoints
3
Card three
Pure CSS container queries
Widely supported
layoutno-js

Quick implementation

/* HTML: <div class="cq-container">...cards...</div> */

.cq-container {
  container-type: inline-size;
  container-name: spacing-demo;
}

.cq-card-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@container spacing-demo (min-width: 28rem) {
  .cq-card-list {
    gap: 1.5rem;
  }
}

@container spacing-demo (min-width: 32rem) {
  .cq-card-list {
    gap: 2rem;
  }
}

Prompt this to your LLM

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

You are a senior frontend engineer specializing in modern CSS layout.

Goal: Build a card list where spacing (gap) adapts to the container width using container queries.

Technical constraints:
- Use container-type: inline-size on the parent to establish a query container.
- Use @container with min-width breakpoints to adjust gap values.
- Use oklch() for all colors, not rgba() or hex.
- Gap should scale: 1rem at narrow, 1.5rem at medium, 2rem at wide containers.
- Include focus-visible styles for keyboard accessibility.

Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept `items` prop (array of card data), `containerWidth` (optional), and return the list with inline container style.

Edge cases to handle:
- What happens when container queries are not supported? Provide a fallback gap using @supports.
- Handle very narrow containers (<16rem) with a minimum gap and readable layout.
- ARIA: ensure card list is semantically marked up (use <ul> + <li> if appropriate).

Why this matters in 2026

Container queries flip responsive design on its head. Instead of asking "how wide is the viewport?", you ask "how wide is this component's container?". That's the difference between a layout that breaks in a sidebar versus one that adapts gracefully. Spacing is the first place you notice the difference: tight gaps on small containers, roomy gaps on wide ones — all without a single media query.

The logic

container-type: inline-size tells the browser to track the element's width as a queryable dimension. The container-name (e.g., spacing-demo) gives it a handle. Then @container spacing-demo (min-width: 28rem) applies styles only when that container exceeds 28rem. The gap property scales incrementally: 1rem → 1.5rem → 2rem as the container grows.

Unlike media queries (which check viewport width), container queries check the element's own width. That means the same card list can have tight spacing in a narrow sidebar and generous spacing in a full-width main area.

Accessibility & performance

Container queries are purely presentational — they don't change semantics or keyboard navigation. Ensure your card list uses semantic HTML (e.g., <ul> + <li>) if the cards represent a list. Performance-wise, container queries are GPU-friendly: the browser recalculates them during layout, not paint. On very old browsers without CQ support, provide a sensible default gap that works at all sizes.

Tip: Name your containers descriptively (e.g., sidebar-spacing, card-list) to avoid conflicts in large codebases.