Components That Scale Like Images

Slide previews

1. 

   css

   Components That Scale

   Stop using media queries when you need a component to look right in a sidebar AND a hero. There's a one-line fix, and it changes how you write CSS.

   swipe →
2. 02

   The Problem

   Media Queries Miss The Point

   The same card might live in a 250px sidebar and a 900px hero. Media queries don't know which. One set of breakpoints can't be right for both.

   • Components live in many widths.
   • Viewport size is the wrong signal.
   • Breakpoint guesswork never ends.

   
3. 03

   The Tool

   Ask Your Parent's Size

   Declare a container, and its descendants can finally ask: how big is my parent right now? CSS catches up with how we actually build components.

   css

   .card {
     /* I am a container.
        Track my width. */
     container-type: inline-size;
   }

   
4. 04

   The Units

   1cqi = 1% Of Container

   Like vw and vh, but anchored to the container instead of the viewport. Sizes scale linearly with whatever box you're inside.

   css

   .card .title {
     font-size: 4cqi;   /* 4% of card width */
     padding: 2cqi;
   }
   /* card 400px wide -> 16px
      card 800px wide -> 32px */

   
5. 05

   The Pattern

   One Knob, Whole Composition

   Set font-size at the root in cqi. Use em for everything else. The component now scales like an SVG, except it's just HTML and CSS.

   css

   .card .inner {
     font-size: 4cqi;
   }
   .title  { font-size: 2.5em; }
   .body   { font-size: 0.9em; }
   .avatar { height: 1.4em; }
   .grid   { gap: 1.5em; }

   
6. 06

   Gotcha

   It Can't Query Itself

   The first time you try this, it breaks. cqi skips past the element it's declared on. You need two: one declares the container, one consumes it.

   css

   /* WRONG. cqi resolves
      against the viewport */
   .card {
     container-type: inline-size;
     font-size: 4cqi;
   }
   
   /* RIGHT. Split into two */
   .card  { container-type: inline-size; }
   .inner { font-size: 4cqi; }

   
7. 07

   Closing

   Use For Reusable UI

   Cards, badges, slide previews. Anything that travels between widths. Skip it for body copy. Articles should follow the reader, not the box.

   • Great for: components, widgets, tiles.
   • Skip for: articles, long-form prose.
   • Hybrid: pair cqi with clamp().

   Container queries + em cascade = components that scale like images.

   

Slide 1 of 7