Containers

You built a card component. It has a heading, a short description, and a metadata row. In the main product grid, at three columns wide, it looks right. In the sidebar, where it's narrower, the heading wraps badly and the metadata row overflows.

You wrote a media query at 768px. The sidebar card changed. So did every other card on the page, including the ones in the grid that looked fine.

Viewport breakpoints measure the wrong thing. They measure the window. The card doesn't care about the window. It cares about its own width.

Drag the slider to narrow the card. Below 340px the title shrinks and the metadata stacks vertically. Above 340px it gets a larger heading and a horizontal metadata row. The viewport doesn't change — only the container width does. This is what @container rules respond to.

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

/* Applies only when the card itself is at least 28rem wide */
@container (min-width: 28rem) {
.card-title {
  font-size: var(--text-h3);
}

.card-meta {
  flex-direction: row;
}
}

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

/* Applies only when the card itself is at least 28rem wide */
@container (min-width: 28rem) {
.card-title {
  font-size: var(--text-h3);
}

.card-meta {
  flex-direction: row;
}
}

container-type: inline-size makes the element a containment contextAn element declared as a CSS container. Its descendants can write @container rules that measure the container's own dimensions instead of the viewport's.. Any @container rule inside it measures that element's width, not the viewport. The card in the sidebar gets the narrow layout. The card in the grid gets the wide one. Same component. No conflict.

Naming containers

Nested components query the nearest ancestor containment context by default. If you need to query a specific ancestor, name it.

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

@container sidebar (min-width: 16rem) {
.sidebar-title {
  font-size: var(--text-h2);
}
}

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

@container sidebar (min-width: 16rem) {
.sidebar-title {
  font-size: var(--text-h2);
}
}

This is most useful when one component is nested inside another, and each has its own container context.

Container units

Inside @container blocks you can use cqiContainer Query Inline: a CSS unit equal to 1% of the container's inline (width) axis. Works like vw but scoped to the nearest containment context instead of the viewport. (container inline) and cqbContainer Query Block: a CSS unit equal to 1% of the container's block (height) axis. Requires the container to have a known height, so it's used less often than cqi. (container block) units, which work like vw and vh but relative to the container.

@container (min-width: 24rem) {
.card-heading {
  /* 4% of the card's inline size */
  font-size: clamp(1rem, 1cqi + 0.8rem, 1.5rem);
}
}

@container (min-width: 24rem) {
.card-heading {
  /* 4% of the card's inline size */
  font-size: clamp(1rem, 1cqi + 0.8rem, 1.5rem);
}
}

Combining clamp() with cqi gives you fluid type that responds to the container width instead of the viewport width.

Container queries are supported in Chrome 106+, Firefox 110+, Safari 16+. The cqi unit follows the same support table.