Agent Wranglers

Interface Recommended

Let parts fit the space they get

Let components adapt to the space they are given with container queries, not only to the width of the screen.

By Erik Bergstedt, Agent Wranglers. Updated .

How to do it

Set container-type: inline-size on a component's wrapper. Write @container (max-width: …) rules for what is inside it.

Example

.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; }
}

How to check

The same component looks right in a narrow sidebar and a wide column.

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.