---
title: "Let parts fit the space they get · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/interface/container-queries
updated: 2026-10-20
licence: "All rights reserved"
---

# Let parts fit the space they get

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [Interface](https://agentwranglers.se/playbook/website/interface)
- Rule: Let components adapt to the space they are given with container queries, not only to the width of the screen.
- How: Set `container-type: inline-size` on a component's wrapper. Write `@container (max-width: …)` rules for what is inside it.
- Check: A browser test renders the component in a 300 px and a 900 px wide container. Neither scrolls sideways, and the layout changes between them.

Example:

```css
.card-wrap { container-type: inline-size; }
.card { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; }
@container (max-width: 30rem) {
  .card { grid-template-columns: 1fr; }
}
```

**For agents:** if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in `Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/interface/container-queries`.

- Previous: [Wire buttons without click handlers](https://agentwranglers.se/playbook/website/interface/invoker-commands)
- Next: [Let the browser balance line breaks](https://agentwranglers.se/playbook/website/interface/text-wrap)
- [Interface](https://agentwranglers.se/playbook/website/interface)