For designers

Components that respond to their own space

Container queries let a component change its layout by the space it's given, not by the size of the screen, so it works anywhere it's placed.

A breakpoint, or media query, asks how wide the screen is. A container query asks how wide the component’s own space is. So a lot card can be designed once and placed in a main column, a sidebar or a carousel, and each copy lays itself out for the space it’s in.

Try it

The box is a small page: a wide main column and a narrow sidebar, with the same lot card in each. The card goes side by side when the space it’s answering to is wider than 360px.

Leave it on “The screen” and widen the box. Both cards go side by side, including the one squeezed into the sidebar. Switch to “Its container” and each card follows its own column.

Main column

A sunlit hillside village painting with a winding path, green fields and rolling hills under a cloudy sky.

Camille Pissarro (1830–1903)

Jalais Hill, Pontoise, 1867

Estimate: £3,500,000–5,500,000

Sidebar

A sunlit hillside village painting with a winding path, green fields and rolling hills under a cloudy sky.

Camille Pissarro (1830–1903)

Jalais Hill, Pontoise, 1867

Estimate: £3,500,000–5,500,000

The title grows with its space too. It’s sized in cqi, a hundredth of the container’s width, the container version of vw.

What it means for your designs

Design a component by the space it gets, not by the screen. A card has a narrow layout and a wide layout, and the switch happens at a width of the card, not of the page. That’s closer to how you build components in Figma, where an instance doesn’t know how big the screen is.

  • Give each component its own breakpoint: “the lot card goes side by side above 360px”. It applies on any screen.
  • Expect a wide layout in a narrow place and the other way round. A sidebar card on a big screen can be narrower than a main card on a tablet.
  • Page layouts still use the screen. The page decides the columns, and the components inside respond to the columns.

In Figma

Make the component’s variants by width: “Card / narrow” and “Card / wide”. Note the width where it switches, measured on the card, not the frame: “Side by side when the card is wider than 360px”.

Then show the same component in the places it will go, such as the main column and the sidebar, so the developer sees it needs a container query.

Say this to a developer

“Can the lot card use a container query, so it goes side by side when the card itself is wider than 360px? It sits in the sidebar as well as the main column.”

Lot card
.lot-card-slot {
  container-type: inline-size;
}


@container (inline-size > 360px) {
  .lot-card {
    display: grid;
    grid-template-columns: 40% 1fr;
  }
}


.lot-card__title {
  font-size: clamp(1rem, 0.75rem + 2cqi, 1.5rem);
}

Watch out for

Gotcha

A component can’t measure itself, only the box around it. So the developer marks the space it sits in as a container. Mention which box that is when it’s not obvious, such as a carousel slide.

  • A container query answers questions about width (and, with more setup, height). Questions about the reader, such as dark mode or reduced motion, still use media queries.
  • Text sized in cqi alone ignores the reader’s text setting, like vw. Keep a rem part in it, as the example does.

Browser support

Every current browser, and every browser since February 2023: Chrome and Edge 105, Firefox 110 and Safari 16.