Container components

Build reusable components with container queries.

A reusable component

Picture a card component: the same card should look wide in the main column, narrow in a sidebar, medium in a modal. Media queries watch the screen, so one CSS cannot cover all three. Container queries encapsulate the component so it listens only to the box it lives in.

The component then adapts to where it is placed. The same HTML and CSS produce different looks in different containers; reuse goes up.

Encapsulation and isolation

A container component is somewhat resistant to outside styles. Its inner @container queries look only at the component's own container; a font size or color coming from a parent does not break inner queries.

This brings consistency to a design system. When the team works on a component, they read its behavior in different containers from the component file; no need to look elsewhere.

Exercise A reusable card component

Give the .product selector container-type: inline-size and container-name: product. Then, inside an @container product (min-width: 320px) query, set display: grid on the .product-body sub-selector. The product card lays out as one column when narrow and a grid when wide.

Show example solution

/* open the product card container and name it */
/* switch the body to a grid in wide containers */
.product {
  container-type: inline-size;
  container-name: product;
}
@container product (min-width: 320px) {
  .product-body {
    display: grid;
  }
}

Test yourself

What is the core benefit of container components?
- The same component looks different in different containers
- Less HTML is written
- JavaScript runs faster
- Browser memory drops
Show answer

The same component looks different in different containers — Correct. The component adapts to its container, not the screen width.

Define the component container

.product {
  container-type: ____;
  container-name: product;
}

Show answer

.product {
  container-type: inline-size;
  container-name: product;
}

Match component concepts

Encapsulation

Component listens to container
Not inheritance

Looks at container not parent
Reuse

Same CSS in different containers
Responsive

Adapts to the container

Next lesson: Summary - Responsive widget system

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies