Card that adapts to container width
Vertical in narrow containers, horizontal in wide ones — via @container.
Adaptive card
This card switches from vertical to horizontal layout based on its container width, not the viewport.
Quick implementation
/* HTML: <div class="card-wrapper"><div class="card">...</div></div> */
.card-wrapper {
container-type: inline-size;
container-name: card;
}
.card {
display: flex;
flex-direction: column;
background: oklch(0.19 0.02 260);
border: 1px solid oklch(0.25 0.02 260);
border-radius: 1rem;
overflow: hidden;
}
@container card (min-width: 28rem) {
.card {
flex-direction: row;
}
.card-image {
width: 12rem;
flex-shrink: 0;
}
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building a responsive card component.
Goal: A card that adapts its layout based on its container width using CSS container queries — no media queries, no JavaScript.
Technical constraints:
- Wrap the card in a container with container-type: inline-size.
- Default layout: vertical (flex-direction: column).
- At 28rem container width: switch to horizontal (flex-direction: row).
- Use oklch() for all colors, not hex or rgba().
- Image section should have a fixed width in horizontal mode.
Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept image, title, and description props.
Edge cases to handle:
- Card without an image should still work in both orientations.
- Very long titles should truncate with ellipsis in horizontal mode.
- Fallback for browsers without container query support (Chrome 105+, Safari 16+, Firefox 110+).
Return HTML + CSS.Why this matters in 2026
Media queries respond to the viewport — but a card inside a sidebar and the same card in a main content area need different layouts at the same viewport width. Container queries let components respond to their own available space. This is the shift from page-level responsiveness to component-level responsiveness.
The logic
container-type: inline-size on the wrapper tells the browser to track the element's inline (horizontal) size. @container card (min-width: 28rem) applies styles only when that wrapper is at least 28rem wide. Inside the query, we switch from flex-direction: column to row, turning the vertical card into a horizontal one. The container-name lets you target a specific ancestor when containers are nested.
Accessibility & performance
Container queries add no JavaScript overhead — they are evaluated during the CSS layout pass. The layout remains semantic: heading, image, and text are in logical order regardless of flex direction. For browsers that do not support container queries (rare in 2026), the card falls back to the vertical layout, which is a safe default.