What is Container queries?
The short answer
Container queries style an element based on the size of its own container rather than the whole screen, so components adapt wherever they are placed.
Container queries, explained
A card can be a row in a wide sidebar and a stack in a narrow one, with no knowledge of the page around it.
Questions people ask about Container queries
What is Container queries?
Container queries style an element based on the size of its own container rather than the whole screen, so components adapt wherever they are placed.
Related terms
A media query is a CSS rule that applies styles only when conditions are met, such as a screen width, dark mode preference or reduced-motion setting.
Responsive designResponsive design is building one website whose layout adapts to every screen size, from phones to wide monitors, instead of separate mobile and desktop sites.
ComponentA component is a self-contained, reusable piece of interface, like a button, card or navigation bar, with its own structure, style and behaviour.
DOMThe DOM is the browser's live, tree-shaped model of a web page; JavaScript reads and changes the DOM to update what visitors see.
Part of the Web Encyclopedia by Apex Flow Digital. Definitions are general knowledge, kept current, with no invented statistics.