CSS Container Queries Cheat Sheet

Syntax for container-type, container-name, and @container rules to style elements based on their parent container's size.

1 PageIntermediateFeb 5, 2026

Declaring a Containment Context

Mark an element as a query container so its children can respond to its size.

css

.card-wrapper {  container-type: inline-size; /* query on width only, most common */  container-name: card;        /* optional, lets you target it by name */}/* shorthand for both properties */.sidebar {  container: sidebar / inline-size;}

@container Rule

Apply styles when the nearest queried ancestor container crosses a width threshold.

css

@container card (min-width: 400px) {  .card-title {    font-size: 1.5rem;    grid-template-columns: 1fr 2fr;  }}@container (max-width: 399px) {  .card-title { font-size: 1rem; }}

Container Query Length Units

Size elements relative to the container instead of the viewport.

css

.card-icon {  /* cqw/cqh = 1% of container's inline/block size */  width: 10cqw;  /* cqi/cqb = logical inline/block equivalents */  padding: 2cqi;  /* cqmin/cqmax = smaller/larger of cqi and cqb */  font-size: clamp(1rem, 4cqmin, 2rem);}

Container Style Queries

Query a custom property's value on the container, not just its size.

css

.theme-container {  container-type: inline-size;  --card-variant: compact;}@container style(--card-variant: compact) {  .card { padding: 0.5rem; }}

Container Query Property Reference

The full set of properties/units involved.

container-type- 'normal' | 'inline-size' | 'size' — size containment axis
container-name- custom identifier used to target a specific ancestor in @container
container (shorthand)- `name / type` combined, e.g. `sidebar / inline-size`
cqw / cqh- 1% of the query container's width/height
cqi / cqb- 1% of the container's inline-size/block-size (writing-mode aware)
cqmin / cqmax- smaller/larger of cqi and cqb, handy for fluid typography

Pro Tip

Set `container-type: inline-size` only on the direct parent you actually want to query from — an element can't query its own size, and setting `container-type` unnecessarily deep in the tree creates extra containment contexts that hurt layout performance.

Was this cheat sheet helpful?

Web Animations API Cheat Sheet

View Transitions API Cheat Sheet

Explore Topics

#CSSContainerQueries#CSSContainerQueriesCheatSheet#WebDevelopment#Intermediate#DeclaringAContainmentContext#ContainerRule#Container#Query#Databases#Docker#CheatSheet#SkillVeris

Sri Hayavadhana Info-Tech

Professional Web Designing Services