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.
Instagram Carousel
A short CSS pattern that makes a component look identical at any size, like an image being resized. Container queries plus an em cascade, no breakpoints, no JS.
Export
7 PNGs in one ZIP
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.
The Problem
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.
The Tool
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.
.card {
/* I am a container.
Track my width. */
container-type: inline-size;
}The Units
Like vw and vh, but anchored to the container instead of the viewport. Sizes scale linearly with whatever box you're inside.
.card .title {
font-size: 4cqi; /* 4% of card width */
padding: 2cqi;
}
/* card 400px wide -> 16px
card 800px wide -> 32px */The Pattern
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.
.card .inner {
font-size: 4cqi;
}
.title { font-size: 2.5em; }
.body { font-size: 0.9em; }
.avatar { height: 1.4em; }
.grid { gap: 1.5em; }Gotcha
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.
/* 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; }Closing
Cards, badges, slide previews. Anything that travels between widths. Skip it for body copy. Articles should follow the reader, not the box.
Container queries + em cascade = components that scale like images.
Slide 1 of 7