Image layout adapts to container
Image cards that switch from vertical to horizontal layout based on container width.
@container (min/max-width)
Product showcase
This card flips to a horizontal layout when the container is wide enough (>28rem).
Quick implementation
/* 1. Declare container on wrapper */
.card-wrapper {
container-type: inline-size;
container-name: card;
}
/* 2. Default: vertical (stacked) layout */
.card {
display: flex;
flex-direction: column;
border-radius: var(--radius-lg);
overflow: hidden;
}
.card .media {
aspect-ratio: 16 / 9;
background: var(--accent-soft);
}
.card .body {
padding: 1rem;
}
/* 3. Wide container: side-by-side layout */
@container card (min-width: 28rem) {
.card {
flex-direction: row;
}
.card .media {
aspect-ratio: 1;
width: 40%;
border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.card .body {
width: 60%;
border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
}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.
Goal: Build an image card component that switches from vertical (stacked) to horizontal (side-by-side) layout based on container width.
Technical constraints:
- Use container-type: inline-size on the wrapper with container-name: card.
- Default: flex-direction: column (vertical stack). At ≥28rem: flex-direction: row (side-by-side).
- The image/media area should have aspect-ratio: 16/9 in vertical, aspect-ratio: 1 in horizontal.
- All colors must use oklch() — no rgba() or hex.
- Use var(--radius-lg) for border-radius values.
Framework variant (pick one):
A) Vanilla HTML + CSS only.
B) React component — accept imageSrc, title, description props; include the CSS as a CSS module.
Edge cases to handle:
- Provide a fallback for browsers without @container support (the default CSS already handles this).
- Ensure the card remains keyboard-accessible if interactive (no remove of :focus-visible).
- Mention what happens when the container never reaches 28rem (stays vertical).
Return HTML + CSS, clearly separated.Why this matters in 2026
Before container queries, an image card's layout depended on viewport breakpoints. The same component needed different styles inside a sidebar vs. a main column. That meant duplicating styles or relying on utility classes to override layout. Container queries let the component decide its own layout based on the space it's given.
This is especially powerful for image-heavy components. A vertical stack works well in narrow spaces, but a horizontal layout makes better use of wider containers. With @container, the switch happens automatically.
The logic
container-type: inline-size makes the wrapper a query container. The @container card (min-width: 28rem) rule checks the container's inline size, not the viewport. When the condition is met, the card switches to flex-direction: row and adjusts the media/body proportions.
The aspect-ratio property ensures the image maintains its shape regardless of layout. In vertical mode it's 16/9 (wider), in horizontal mode it's 1:1 (square) to fit the narrower side panel.
Accessibility & performance
Container queries are purely presentational — they don't change the DOM order or semantics. The image remains before the text in the HTML, which is good for screen readers. Performance is excellent: the browser resolves container queries during layout, with no JS required.