Summary - Responsive widget system
Build a responsive widget system with container queries.
A responsive widget system
In this summary we combine four concepts: container-type opens the container, container-name names it, the cqi unit scales by container, style() queries a custom property value. Together they form a widget system that lays itself out based on its container.
The widget listens to its container, not the screen; the same widget runs wide on the main page, narrow in a sidebar, medium in a modal. Design stays consistent; code duplication drops.
Exercise Set up the widget container
Give the .widget selector container-type: inline-size and container-name: widget. Then set font-size: 4cqi on the .widget h2 sub-selector. The widget heading scales with the container's width.
Show example solution
/* open and name the widget container */
/* heading grows with the container width */
.widget {
container-type: inline-size;
container-name: widget;
}
.widget h2 {
font-size: 4cqi;
}Exercise Add a widget variant
Write an @container widget style(--compact: 1) query. Inside, set padding: 8px on the .widget-body sub-selector. With --compact: 1 set, the widget shows a tighter look; two looks from the same HTML.
Show example solution
/* body shrinks in compact mode */
@container widget style(--compact: 1) {
.widget-body {
padding: 8px;
}
}Test yourself
-
Which unit best scales widget font size by container?
- rem
- vw
- cqi
- em
Show answer
cqi — Correct. cqi scales with the container's inline axis; the widget adapts to its container.
-
Name the widget container
.widget { container-type: inline-size; container-name: ____; }Show answer
.widget { container-type: inline-size; container-name: widget; }