Modern Container Queries

Q: What property must be applied to a parent element to make it queryable by its children?

Answer: container-type. The container-type property (usually set to 'inline-size') initializes the element as a container for its descendants to query.

Q: Which unit is equal to 1% of a container's width?

Answer: 1cqw. cqw stands for Container Query Width. 100cqw equals the full width of the parent container.

Move beyond the viewport. Learn how to style components based on the size of their own parent containers, enabling truly modular design systems.

Expert Answer & Key Takeaways

Move beyond the viewport. Learn how to style components based on the size of their own parent containers, enabling truly modular design systems.

1. What are Container Queries?

For 15 years, CSS only allowed us to query the browser window (Media Queries). Container Queries allow us to Query the Parent Element.

The Example: The Smart Card

/* 1. Define the Container (The Parent) */
.card-wrapper {
  container-type: inline-size;
  container-name: card-container;
}

/* 2. Query the Container (The Child) */
@container card-container (min-width: 400px) {
  .card-content {
    display: flex;
    gap: 20px;
  }
}

Feature	Media Query	Container Query
Reference	The entire browser window (Viewport).	The nearest defined Container parent.
Best For	Global page layouts (Header/Footer/Sidebar).	Reusable Components (Cards, Widgets).
Units	`vw`, `vh`, `px`, `rem`	`cqw`, `cqh` (Container Width/Height).

2. The 2-Step Implementation

To use container queries, you MUST follow these two steps exactly:

Step 1: Set the Registry Apply container-type to the parent element. This tells the browser to keep track of this element's size.

.parent { container-type: inline-size; }

Step 2: Write the Query Use @container to style the children based on the parent's size.

@container (min-width: 500px) { .child { color: red; } }

3. Container Query Units

Just like vw (Viewport Width), we now have cqw (Container Width). This is incredibly useful for responsive typography.

.card-title {
  /* Font size will be exactly 10% of the PARENT container's width */
  font-size: 10cqw;
}

[!IMPORTANT] The Containment Trap: You cannot query an element for its own size. You can only query a parent that has been defined with container-type. If you try to query yourself, it will simply fail.

🎯 Practice Challenge: The Sidebar vs. Main Task

Create one .card component.
Place one copy inside a narrow <aside> (300px) and another inside a wide <main> (800px).
Task 1: Set both parent containers (aside and main) to container-type: inline-size.
Task 2: Write a @container query that changes the card's background to Blue if it is wider than 500px.
Observation: You will see the SAME card component look different in two places on the same screen!

4. Senior Interview Corner

Q: Why is Container Queries considered the 'Holy Grail' of component-driven development?

A: Because it enables true modularity. Before Container Queries, if you built a 'Newsletter Widget', you had to know if it was being used in a sidebar or a footer to style it correctly via Media Queries. Now, the widget can define its own responsive behavior based solely on how much space it is given, making it plug-and-play anywhere in the app.

Q: What is the difference between inline-size and size for container-type?

A: inline-size only tracks the width of the container. size tracks both width AND height. In 99% of web layouts, we only care about width for responsiveness, so inline-size is the standard performance-friendly choice.

Modern Container Queries

Expert Answer & Key Takeaways

1. What are Container Queries?

The Example: The Smart Card

2. The 2-Step Implementation

3. Container Query Units

🎯 Practice Challenge: The Sidebar vs. Main Task

4. Senior Interview Corner

Top Interview Questions

?Interview Question

?Interview Question

Course4All Engineering Team

Found an issue or have a suggestion?

Modern Container Queries

Expert Answer & Key Takeaways

1. What are Container Queries?

The Example: The Smart Card

2. The 2-Step Implementation

3. Container Query Units

🎯 Practice Challenge: The Sidebar vs. Main Task

4. Senior Interview Corner

Top Interview Questions

?Interview Question

?Interview Question

Course4All Engineering Team

Explore More css

Modern UI Layout Patterns

Modern Selectors (:has, :is)

CSS Variables (Custom Properties)

CSS Math Functions (calc, clamp)

Found an issue or have a suggestion?