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