Media card with CQ
Responsive card that adapts to its container using container-type and @container — no media queries.
Container Query Card
Resize this wrapper to see the card adapt its layout.
Narrow Card
This wrapper is narrower, triggering smaller styles.
Quick implementation
/* HTML:
<div class="cq-wrapper">
<div class="media-card">
<div class="media-card__image"></div>
<div class="media-card__content">
<h3 class="media-card__title">Title</h3>
<p>Content</p>
</div>
</div>
</div>
*/
.cq-wrapper {
container-type: inline-size;
container-name: card;
}
.media-card {
background: var(--card);
border: 1px solid var(--card-border);
border-radius: var(--radius);
overflow: hidden;
}
.media-card__image {
width: 100%;
aspect-ratio: 16 / 9;
background: oklch(0.25 0.02 265);
}
.media-card__content {
padding: 1rem;
}
/* Adapt when container is wider than 20rem */
@container card (min-width: 20rem) {
.media-card__content {
padding: 1.25rem;
}
.media-card__title {
font-size: 1.15rem;
}
}Prompt this to your LLM
Crafted prompt — includes role, intent, constraints, framework variant, and edge cases to handle.
You are a senior frontend engineer specializing in modern CSS.
Goal: Build a responsive media card component that adapts its layout based on container width, not viewport width.
Technical constraints:
- Use container-type: inline-size on a wrapper element to establish a container.
- Use @container (min-width: ...) to apply different styles when the container crosses a threshold.
- Use oklch() for all colors (backgrounds, borders, text) instead of rgba() or hex.
- Include aspect-ratio for the image placeholder to maintain consistent proportions.
- Ensure focus states are visible for keyboard accessibility.
Framework variant (pick one):
A) Vanilla HTML/CSS only — return a .media-card class with a .cq-wrapper container.
B) React component — accept `children`, `className`, `containerWidth` props; include the CSS as a CSS module.
Edge cases to handle:
- Provide a fallback for browsers without container query support (use @supports or a sensible mobile-first default).
- Handle the case where the image fails to load (maintain aspect ratio with background).
- Ensure text remains readable at smaller container sizes (adjust font sizes, padding).
Return the HTML structure and the CSS, clearly separated.Why this matters in 2026
Container queries shift responsiveness from the viewport to the component. Instead of asking @media (min-width: 768px), you ask @container (min-width: 20rem) — the card adapts to its wrapper, not the screen. This makes components truly reusable: drop the same card into a sidebar or a full-width hero, and it just works.
Container queries are now Baseline Widely Available, so you can ship them without polyfills. Combine with container-type: inline-size for a component that scales gracefully across any layout.
The logic
container-type: inline-size declares the element as a container that tracks its inline (horizontal) size. The @container card (min-width: 20rem) rule then applies styles when that container exceeds 20rem. The card name lets you target this specific container if you have multiple on the page.
Why not media queries? Media queries respond to viewport width, which couples components to page layout. Container queries decouple them: a card in a narrow sidebar stays narrow, while the same card in a wide main area expands. No duplicate classes, no JavaScript.
Accessibility & performance
Container queries are CSS-only, so there's no JavaScript performance cost. The browser recalculates container sizes during layout, which is efficient for moderate numbers of containers. For accessibility, ensure that font sizes and padding remain legible at smaller container widths — test with narrow wrappers. Keyboard users should see visible focus states; don't remove outlines without replacing them.
container-name: card) when you have multiple containers on the page. This lets you write @container card (...) instead of guessing which ancestor matches.