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;
}

Next lesson: What are view transitions?

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies