Challenge - Container system

Build a reusable widget system with container queries.

Container query widget

A .widget component reshapes itself to the width of its host. Mark the host with container-type: inline-size; optionally name it with container-name: widget. The component is now responsive to its container.

Inside, set the title size with a declaration like font-size: clamp(1rem, 5cqi, 2rem). cqi is one percent of the container's inline size. The widget shows small text in a narrow host and large text in a wide one; the viewport no longer matters.

Exercise Build the widget container system

Build a widget system. On .widget-host add container-type: inline-size and container-name: widget. On .widget__title add font-size: clamp(1rem, 5cqi, 2rem).

Show example solution

/* widget host */
.widget-host {
  container-type: inline-size;
  container-name: widget;
}

/* widget title */
.widget__title {
  font-size: clamp(1rem, 5cqi, 2rem);
}

Test yourself

Which declaration marks a host as a container query target?
```
.widget-host {
  /* ??? */
}
```
- container: widget
- container-type: inline-size
- container-width: 100%
- display: container
Show answer

container-type: inline-size — Correct. container-type: inline-size turns the host into a query target; children track its width via @container.

Write the container-type declaration

.widget-host {
  ____;
  container-name: widget;
}

Show answer

.widget-host {
  container-type: inline-size;
  container-name: widget;
}

Match container concepts

container-type

Marks the host
container-name

Names the host
cqi

One percent of inline size
@container

Query against the host

Next lesson: Challenge - View transitions

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies