How would you use container queries to create reusable, responsive components?

How would you use container queries to create reusable, responsive components?

• A. Wrap each component in a fixed size div.
• B. Use only viewport-based media queries.
• C. Container queries cannot affect internal styles.
• D. Define container-type and apply @container rules to adjust internal styles based on the container size.

Answer: (D)

Container queries let components adapt to the size of the container they’re in, not just the overall viewport. To make a reusable, responsive component, mark the element that will host the responsive behavior as a container by setting container-type (commonly inline-size). Then use @container rules to adjust the internal styles when the container’s inline size crosses certain thresholds. For example, when the container is wide enough, you can switch a layout from stacked to horizontal, tighten padding, or change typography, all without caring about the page’s viewport. This approach is why the option with container-type and @container is the best. It enables true reusability because the component responds to its own size, wherever it’s placed. Wrapping in a fixed-size div ties the component to that specific size, defeating responsiveness. Relying only on viewport-based media queries makes the component react to the page rather than to its container, which hurts composability. And container queries do affect internal styles once the container size changes, which is the whole point of making reusable, adaptive components.

Container queries let components adapt to the size of the container they’re in, not just the overall viewport. To make a reusable, responsive component, mark the element that will host the responsive behavior as a container by setting container-type (commonly inline-size). Then use @container rules to adjust the internal styles when the container’s inline size crosses certain thresholds. For example, when the container is wide enough, you can switch a layout from stacked to horizontal, tighten padding, or change typography, all without caring about the page’s viewport.

This approach is why the option with container-type and @container is the best. It enables true reusability because the component responds to its own size, wherever it’s placed. Wrapping in a fixed-size div ties the component to that specific size, defeating responsiveness. Relying only on viewport-based media queries makes the component react to the page rather than to its container, which hurts composability. And container queries do affect internal styles once the container size changes, which is the whole point of making reusable, adaptive components.