Container Query

Noun · Development

Definitions

  1. A CSS feature that applies styles based on the size of a component's container rather than the viewport. Enables truly reusable responsive components — a card component can adapt its layout whether it's in a sidebar (300px) or main content area (800px) without knowing about the page layout.

    In plain English: CSS rules that change based on how much space a component has, rather than the screen size.

    Example: "@container (min-width: 400px) changes the card to horizontal layout — it works regardless of where the card is placed on the page."

Related Terms