CSS Container Queries

How It Works

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

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

@container (min-width: 420px) {
  .card {
    grid-template-columns: 180px 1fr;
    grid-template-rows: none;
  }
}

Summary

• container-type: inline-size establishes a containment context, telling the browser to track the container’s width for query purposes.
• @container queries work like media queries, but instead of checking the viewport width, they check the container’s width.
• The same card component automatically switches from a vertical layout (narrow container) to a horizontal layout (wide container) — without any JavaScript.
• This is true component-level responsive design — something that @media queries, Tailwind, and Bootstrap cannot achieve because they only respond to viewport dimensions.
• Supported in Chrome 105+ (Aug 2022), Safari 16+ (Sep 2022), Firefox 110+ (Feb 2023), and Edge 105+. Fully cross-browser.