Container Query

ELI5 — The Vibe Check

Container queries are like media queries, but instead of checking the window size, they check the size of the parent container. Finally. For years, CSS could only ask 'how wide is the whole screen?' Now it can ask 'how wide is the box I'm sitting in?' This means a card component can rearrange itself based on its container, not the viewport. Responsive design just got way more granular.

Real Talk

CSS Container Queries (@container) allow elements to apply styles based on the size of their nearest containment context rather than the viewport. This enables truly component-level responsive design, where a component adapts its layout based on available space regardless of screen size. Declared with container-type: inline-size on the parent and @container (min-width: 400px) rules for children. Supported in all modern browsers since 2023.

Show Me The Code

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

.card {
  display: grid;
  grid-template-columns: 1fr;
}

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

When You'll Hear This

"Use a container query so the card stacks vertically in narrow sidebars." / "Container queries make your components truly portable."