Sidebar-aware layout
A layout that uses CSS container queries to reflow its content based on the container width, not the viewport — perfect for reusable components.
Drag the bottom-right corner of the box to resize and watch the layout respond.
Quick implementation
.sidebar-aware {
container-type: inline-size;
}
.sa-card {
display: flex;
flex-direction: column;
gap: 1rem;
}
@container (min-width: 28rem) {
.sa-card {
flex-direction: row;
align-items: center;
}
.sa-card__image {
flex-shrink: 0;
width: 8rem;
}
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building container-query-driven layouts.
Goal: A card component that uses CSS container queries to switch between
a vertical stack and a horizontal row based on its container width —
not the viewport width.
Technical constraints:
- Apply container-type: inline-size to the wrapper element.
- Use @container (min-width: 28rem) to switch to the horizontal layout.
- Use display: flex with flex-direction toggling between column and row.
- Use oklch() for all color values.
- Do not use media queries — only @container queries.
Framework variant (pick one):
A) Vanilla CSS utility — .sidebar-aware wrapper + .sa-card child classes.
B) React component — renders a div with container-type: inline-size; the
inner layout card adjusts via @container in a CSS Module.
Edge cases to handle:
- Nested containers: if .sidebar-aware is itself inside a container query
context, use container-name to scope queries to the correct ancestor.
- If the image is absent, the text should still lay out correctly without
a gap placeholder.
- Add container-name to the wrapper if you need to distinguish it from
child containers in nested queries.
Return CSS only (or a React component if variant B).Why this matters in 2026
Container queries solve the fundamental limitation of media queries — they respond to viewport width, not the element's available space. A card placed in a narrow sidebar uses a different layout than the same card in a full-width section, even at the same viewport width. With container-type: inline-size, the component adapts to wherever it is placed.
The logic
Declare container-type: inline-size on the parent wrapper. This creates a containment context. Any @container rule inside it queries the width of that wrapper, not the viewport. The .sa-card defaults to flex-direction: column (stacked). At container widths of 28rem or more, it switches to flex-direction: row (horizontal). The child .sa-card__image gets a fixed width only in the wide layout.
Accessibility & performance
Container queries are evaluated on the CSS layout thread and don't require JavaScript. There is no additional DOM query cost. Use container-name to distinguish nested containers when queries might conflict.