Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Traditional media queries respond to the viewport size. But what if you want a card to look different based on where it's placed? That's where container queries shine!
Responds to viewport width
Same component looks identical everywhere
Responds to container size
Same component adapts to its space
❌ Both cards look the same because media query only checks viewport
✓ Each card adapts to its container size independently
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Container Queries Basic</title>
</head>
<body>
<h1 style="text-align: center; color: white; margin-bottom: 30px; font-size: 2.5rem;">
📦 Container Query Demo
</h1>
<div class="sidebar">
<div class="card">
<h2>Product Card</h2>
<p>This description appears when the container is wide enough!</p>
<div class="card-image">📦</div>
</div>
</div>
<p class="resize-note">
Try resizing the browser window to see the card adapt! ↔️
</p>
</body>
</html>Loading preview...
container-type: inline-sizecontainer-name: sidebar@container sidebar (min-width: 400px)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Layout with Container Queries</title>
</head>
<body>
<h1>🎯 Container Queries in Action</h1>
<div class="layout">
<div class="main-content">
<h2 style="color: #667eea; margin-bottom: 20px;">Featured Products</h2>
<div class="product">
<div class="product-image">🎧</div>
<div>
<div class="product-title">Wireless Headphones</div>
<div class="product-description">
Premium noise-cancelling headphones with 30-hour battery life.
Perfect for music lovers and travelers.
</div>
<div class="product-price">$199.99</div>
<button class="product-button">Add to Cart</button>
</div>
</div>
<div class="product">
<div class="product-image">⌚</div>
<div>
<div class="product-title">Smart Watch</div>
<div class="product-description">
Track your fitness, monitor health, and stay connected on the go.
Water-resistant with GPS.
</div>
<div class="product-price">$299.99</div>
<button class="product-button">Add to Cart</button>
</div>
</div>
</div>
<div class="sidebar">
<h3 style="color: #667eea; margin-bottom: 16px;">Categories</h3>
<div class="sidebar-item">🎧 Electronics</div>
<div class="sidebar-item">👕 Fashion</div>
<div class="sidebar-item">🏠 Home</div>
<div class="sidebar-item">📚 Books</div>
</div>
</div>
</body>
</html>Loading preview...
@container main (min-width: 500px) - Show horizontal layout@container main (min-width: 700px) - Larger images & text@container sidebar (min-width: 300px) - Enhanced sidebar items<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Component-Based Design</title>
</head>
<body>
<h1>✨ Reusable Card Components</h1>
<div class="grid">
<div class="card-container">
<div class="card">
<div class="card-header">
<div class="card-title">Dashboard</div>
<div class="card-subtitle">Analytics Overview</div>
</div>
<div class="card-image">📊</div>
<div class="card-body">
<div class="card-text">
Track your performance metrics and insights in real-time.
</div>
<div class="card-stats">
<div class="stat">
<div class="stat-value">2.5K</div>
<div class="stat-label">Views</div>
</div>
<div class="stat">
<div class="stat-value">89%</div>
<div class="stat-label">Rate</div>
</div>
</div>
<div class="card-footer">
<button class="btn btn-primary">View Details</button>
<button class="btn btn-secondary">Share</button>
</div>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="card-header">
<div class="card-title">Projects</div>
<div class="card-subtitle">Active Work</div>
</div>
<div class="card-image">🚀</div>
<div class="card-body">
<div class="card-text">
Manage and organize your projects efficiently.
</div>
<div class="card-stats">
<div class="stat">
<div class="stat-value">12</div>
<div class="stat-label">Active</div>
</div>
<div class="stat">
<div class="stat-value">45</div>
<div class="stat-label">Total</div>
</div>
</div>
<div class="card-footer">
<button class="btn btn-primary">Open</button>
<button class="btn btn-secondary">Create New</button>
</div>
</div>
</div>
</div>
<div class="card-container">
<div class="card">
<div class="card-header">
<div class="card-title">Messages</div>
<div class="card-subtitle">Unread: 3</div>
</div>
<div class="card-image">💬</div>
<div class="card-body">
<div class="card-text">
Stay connected with your team and clients.
</div>
<div class="card-stats">
<div class="stat">
<div class="stat-value">128</div>
<div class="stat-label">Total</div>
</div>
<div class="stat">
<div class="stat-value">3</div>
<div class="stat-label">New</div>
</div>
</div>
<div class="card-footer">
<button class="btn btn-primary">Read All</button>
<button class="btn btn-secondary">Compose</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Loading preview...
container-type: inline-sizeQueries based on container's width. Most common and useful for responsive design.
container-type: sizeQueries based on both width and height. Use when vertical space matters.
container-type: normalNo container queries. Default value.
cqw1% of container's width
cqh1% of container's height
cqi1% of inline size (width in horizontal text)
cqb1% of block size (height in horizontal text)
@supports (container-type: inline-size) to provide fallbacks.