A newer styling rule that changes a component's layout based on the size of the box it sits in, rather than the size of the whole screen, so the same card can adapt whether it is in a wide or narrow spot.
Synonyms
None recorded.
Related terms
In plain words
- styling based on how much space a component has, not the whole screen
Usage example
With a container query, the product card reflowed on its own whether it sat in the sidebar or the main grid.
Don't confuse with…
- media queryA media query reacts to the whole screen size; a container query reacts to the size of a component's own container.
Categories
- Responsive & adaptive design