Container Queries & Modern Responsive
Lesson 23 • Advanced Track
What You'll Learn
How container queries differ from media queries
Setting up containment with container-type
Writing @container rules to style by parent size
Container query units: cqw, cqh, cqi, cqb
Building truly reusable responsive components
Combining container queries with CSS Grid and Flexbox
💡 Think of It Like This
Media queries ask: "How big is the screen?" Container queries ask: "How big is my parent?"This is a game-changer for reusable components. A card component can adapt its layout based on whether it's in a wide main content area or a narrow sidebar — without knowing anything about the viewport.
| Feature | Media Query | Container Query |
|---|---|---|
| Measures | Viewport (screen) size | Parent container size |
| Reusability | ⚠️ Tied to page layout | ✅ Works anywhere |
| Syntax | @media (min-width:) | @container (min-width:) |
| Setup | None needed | container-type: inline-size |
Container Queries in Action
The same card component adapts its layout based on its container's width — not the viewport.
Container Query Card
Same card in different-width containers
Code Preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Container Queries</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; padding: 30px; }
h1 { color: #3b82f6; margin-bottom: 10px; }
h2 { color: #22c55e; margin: 20px 0 10px; font-size: 1rem; }
/* Set up containment on the wrapper */
...Container Query Units
Container query units let you size things relative to the container, not the viewport.
Container Query Units
Size elements relative to their container
Code Preview
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Container Query Units</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: #0f172a; font-family: system-ui, sans-serif; color: #e5e7eb; padding: 30px; }
h1 { color: #3b82f6; margin-bottom: 20px; }
.demo-container {
container-type: inline-size;
background: #1e293b;
padding: 20px;
border-radius: 8px;
margin: 15px 0;
resize: horizontal;
...⚠️ Common Mistakes
- Forgetting container-type — Container queries only work if the parent has
container-type: inline-size(orsize). Without it, @container rules are ignored. - Using container queries on the element itself — A container can't query its own size. The @container query checks the nearest ancestor with containment.
- Replacing all media queries — Media queries are still useful for page-level layout (overall column count). Container queries are for component-level adaptation.
- Performance with size containment —
container-type: size(both axes) requires the element to have explicit dimensions. Useinline-sizefor width-only containment.
🎉 Lesson Complete
You now understand container queries — the future of responsive design:
- ✅ Container queries style components based on their parent's size, not the viewport
- ✅ Set up with
container-type: inline-sizeon the parent - ✅ Use
@container (min-width: 400px)to write responsive component styles - ✅ Container units (cqw, cqi) size things relative to the container
Sign up for free to track which lessons you've completed and get learning reminders.