@container: query the parent, not the viewport

The killer 2023+ feature

.card-container {
  container-type: inline-size;       /* opt this element in as a query container */
}

.card { padding: 12px; }

@container (min-width: 400px) {
  .card { padding: 24px; display: grid; grid-template-columns: 1fr 1fr; }
}

Now .card adapts to the SIZE OF ITS PARENT, not the viewport. Same component:

• In a 320px sidebar → compact single-column.
• In a 800px main area → 2-column with bigger padding.

Zero media queries.

container-type values

• inline-size — query the parent's WIDTH. The 99% case.
• size — query both width AND height. Use rarely.
• normal (default) — opt OUT, this element is not a query container.

Named containers

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

@container sidebar (min-width: 200px) { ... }
@container main    (min-width: 600px) { ... }

Use names when a component might live inside MULTIPLE differently-named containers and you want explicit targeting.

Browser support 2026

All evergreen browsers shipped containers in 2022-23. Safe to use everywhere. Older browsers ignore the @container block — your CSS fallback applies (so make the default styles the "narrow" version, then enhance with @container for wider).