Container Queries

1. Learning Objectives

In this lesson, you will master CSS Container Queries. By the end of this topic, you will be able to:

• Differentiate between standard media queries and container queries.
• Configure container context wrappers using the container-type property.
• Write @container rules to target container width changes.
• Use Container Query units (like cqw, cqh, and cqi) to scale elements.
• Build modular component cards that adapt to the width of their parent container.

2. Overview

Container queries allow you to style elements based on the dimensions of their parent container rather than the browser viewport. This is a major improvement for component-driven design, allowing you to build modular cards or widgets that adapt their layout depending on where they are placed on the page (e.g. in a narrow sidebar vs a wide main content area).

3. Why This Topic Matters

Container queries make components truly modular and reusable:

• Component Layout Breaks: Standard media queries look only at the screen width. If you place a search widget inside a narrow sidebar on a desktop display, a viewport media query assumes there is plenty of screen space and renders the wide desktop layout. This can cause the widget to overlap and break the sidebar layout.
• Prerequisite Config Failures: Container queries will not work if the parent container is missing the container-type: inline-size declaration. Forgetting this is a common source of styling bugs.

4. Real-World Analogy

Think of container queries like **packing furniture into different rooms**:

• Media Query (The House Size): Deciding what furniture to buy based on the total square footage of the house. This works for overall planning but doesn't tell you how furniture will fit in individual rooms.
• Container Query (The Room Size): Adapting the furniture layout based on the size of the room it is placed in. A modular shelving unit behaves as a tall vertical shelf when placed in a narrow closet (sidebar), but expands into a wide horizontal storage unit when placed in a spacious living room (main content area).

5. Core Concepts

Container queries rely on two key configurations:

• Container Parent (The Context): The wrapper element that defines the layout context. You must apply the container-type property to this element to declare it as a container.
• Container Type Values:
  • inline-size: Styles are applied based on the container's width (most common).
  • size: Styles are applied based on both the container's width and height.
• Container Units: Sizing units (like cqw and cqh) that calculate size relative to 1% of the container's width or height.

6. Syntax & API Reference

Below is a CSS configuration for a container parent and a child card element that adapts to its container's width:

7. Visual Diagram

This diagram displays how a child card adapts its layout based on the width of its parent container:

8. Live Example — Full Working Code

A sample HTML document demonstrating container query layout changes:

9. Interactive Playground

10. Common Mistakes

11. Best Practices

• Always declare a container-type on parent containers: Define container-type: inline-size on parent wrapper elements to establish a container query context.
• Only style child elements inside container queries: Avoid styling the container parent inside its own query to prevent rendering loops. Use queries only to style nested child elements.
• Use container units for fluid scaling: Use container query units (e.g. cqw) to scale font sizes and spacing relative to the parent container width.
• Apply container names when nesting: Use the container-name property to label containers when nesting them, allowing you to target specific containers in your queries.

12. Browser Compatibility

13. Interview Questions

14. Debugging Exercise

15. Practice Exercises

16. Scenario-Based Challenge

17. Quick Quiz

18. Summary & Key Takeaways

• • Container queries style child elements based on the dimensions of their parent container.
• • Always declare container-type: inline-size on parent wrappers to enable container query styles.

19. Cheat Sheet