Component Measurement Units

You already know about vw (percentage of screen width). But in component architecture, we need percentages of the component itself width.

New Units:

• cqw: 1% of container width.
• cqh: 1% of container height.
• cqi: 1% of container size in text direction (inline).

.card {
  container-type: inline-size;
}

.card__title {
  /* Title will occupy 10% of CARD width, not screen */
  font-size: 10cqw;
}