10 Container queries
This chapter covers
We’ve now looked at organizing CSS into easy-to-reuse modules. This sort of approach makes it possible for large teams to use the same CSS when building large-scale websites and web applications. However, designing a module that can be used anywhere on the page can be difficult in the context of responsive design. You will often find you want to place a module in a narrow column, such as a sidebar. While the viewport itself may be large, the space available for that particular module is not. So a regular @media query is not always a practical approach for making the module responsive.
A new feature of CSS, container queries, provides a more versatile option. There are two types of container queries: container size queries and container style queries. Container size queries allow you to modify the styles of elements on the page based on the width of their container element. Container style queries allow you to modify styles based on a custom property of the container.