Containers

You dropped the same card into a sidebar and a full-width grid. A media query at 768px changed both, even though the sidebar card already looked fine.

The Principle

Container queriesAn element declared as a CSS container. Its descendants can write @container rules that measure the container's own dimensions instead of the viewport's. let components respond to their own width instead of the viewport. Add container-type: inline-sizeDeclares an element as a size container on its inline (width) axis so @container rules can query it. to a wrapper, and any @containerA CSS at-rule that applies styles when a named or nearest ancestor container matches a size condition. rule inside measures that element, not the browser window.

The Rule I Follow

I add container-type: inline-sizeDeclares an element as a size container on its inline (width) axis so @container rules can query it. to the component wrapper and write @container rules against it. The same card in a narrow sidebar and a wide grid column each gets the layout that fits. No viewport breakpoint required.

Try It Yourself

Drag the container width slider and watch the card reflow at 340px. The page stays full width. Only the card container changes.

Past 340px the title steps up and the meta row goes horizontal. Below it, the card stays compact. The viewport never moved.

The Mistake I'd Avoid

Using container-type: size instead of container-type: inline-size. size also establishes block-axis containment, which requires a defined height. Most components don't have one, so layout breaks. Use inline-size.

Remember This

Query the component's width, not the viewport's.

.card {
container-type: inline-size; /* query width, not height */
}

@container (min-width: 340px) {
.card-title {
  font-size: var(--text-h3); /* step up inside wide containers */
}

.card-meta {
  flex-direction: row; /* horizontal meta when space allows */
}
}

.card {
container-type: inline-size; /* query width, not height */
}

@container (min-width: 340px) {
.card-title {
  font-size: var(--text-h3); /* step up inside wide containers */
}

.card-meta {
  flex-direction: row; /* horizontal meta when space allows */
}
}