◈ Zone 4

Container
Queries

Components that know their own size.

~100px

Verdant

Premium botanical

$48
New
~250px

Verdant

Premium botanical

$48
New
~500px

Verdant

Premium botanical extract

$48
New
~800px

Verdant

Premium botanical extract — crafted from wild-harvested botanicals for a refined, lasting scent.

$48 free shipping
New
Observatory
✓ Chrome 106+ ✓ Firefox 110+ ✓ Safari 16+ Baseline 2023

The Problem with Media Queries

For years, responsive design meant one thing: watch the viewport. You'd write @media (min-width: 768px) and hope your component landed in the right context. But viewport width is a blunt instrument — a sidebar card and a hero card can occupy the same viewport, yet need completely different layouts.

Container Queries change the contract. Instead of asking "how wide is the window?", a component can ask "how wide is my container?" — and reshape itself accordingly. The component becomes truly self-contained, portable across any layout.

container-type

Declares a containment context. inline-size creates a query context for the inline axis. size covers both axes.

container-name

Assigns an identifier so nested queries can target a specific ancestor — essential when containers are nested inside one another.

@container rule

The query itself. Works like a media query but uses the nearest containment ancestor as the source of truth for its conditions.

Container units

cqi, cqb, cqw, cqh — percentage units relative to the query container's dimensions. Like vw but local.

Basic Container Query

Set up a containment context on the parent, then query it from within the component.

CSS 
/* 1. Declare the containment context */
.card-container {
  container-type: inline-size;
}

/* 2. Style the card based on container width */
@container (min-width: 500px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
  }
}

Named Containers

When containers are nested, name them so the query targets the right ancestor.

CSS 
.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

.main {
  container-type: inline-size;
  container-name: main-content;
}

/* Query the named container specifically */
@container sidebar (min-width: 300px) {
  .card { font-size: 1rem; }
}

@container main-content (min-width: 600px) {
  .card { font-size: 1.25rem; }
}

Container Query Units

Use cqi, cqb, cqw, cqh, cqmin, cqmax to size elements relative to their container.

CSS 
/* cqi = 1% of container's inline size (usually width)  */
/* cqb = 1% of container's block size (usually height)  */
/* cqw = 1% of container width (physical)               */
/* cqh = 1% of container height (physical)              */

.card-title {
  font-size: clamp(1rem, 4cqi, 3rem);
  padding: 2cqi;
}

.card-image {
  width: 30cqi;
  height: 30cqi;
}

Live Resize Playground

Drag the handle to resize the container and watch the card morph through its breakpoints in real time.

Nano < 180px
Compact 180–380px
Row 380–620px
Hero > 620px

Verdant

Premium botanical extract — crafted from wild-harvested botanicals for a refined, lasting scent.

$48 free shipping
New
—px
Drag the handle to begin
Generated @container CSS Resize to see active rules 
/* Drag the resize handle above
   to see which @container rules
   are active at the current width */