Created
October 1, 2025 03:37
-
-
Save amit08255/1f39583228658e4ed8eceefcdba76657 to your computer and use it in GitHub Desktop.
CSS container queries demo
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Advanced CSS Container Queries Demo</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |
| <style> | |
| body { | |
| background: #f6f7fb; | |
| font-family: system-ui, sans-serif; | |
| margin: 0; | |
| padding: 2rem; | |
| } | |
| .dashboard { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); | |
| gap: 2rem; | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| /*------------------------------------------- | |
| PANEL - Named Container (panel) | |
| --------------------------------------------*/ | |
| .panel { | |
| background: #fff; | |
| border-radius: 1.2rem; | |
| box-shadow: 0 2px 16px #0001; | |
| padding: 1.5rem; | |
| container-type: inline-size; | |
| container-name: panel; | |
| resize: horizontal; | |
| min-width: 280px; | |
| max-width: 100%; | |
| overflow: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| transition: box-shadow 0.2s; | |
| } | |
| .panel:hover { | |
| box-shadow: 0 4px 32px #3366cc22; | |
| } | |
| .panel-title { | |
| font-size: 1.4rem; | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| letter-spacing: 0.01em; | |
| } | |
| /*------------------------------------------- | |
| WIDGET - Nested Named Container (widget) | |
| --------------------------------------------*/ | |
| .widget { | |
| background: #eaf0fa; | |
| border-radius: 0.8rem; | |
| padding: 1.2rem 1rem; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.1rem; | |
| container-type: inline-size; | |
| container-name: widget; | |
| box-shadow: 0 1px 6px #b3c6ff12; | |
| min-width: 160px; | |
| transition: background 0.3s; | |
| } | |
| /*------------------------------------------- | |
| CARD - Inner Adaptive Element | |
| --------------------------------------------*/ | |
| .card { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.2rem; | |
| background: #fff; | |
| border-radius: 0.6rem; | |
| padding: 0.8rem 1rem; | |
| box-shadow: 0 1px 4px #b3c6ff22; | |
| transition: flex-direction 0.3s, background 0.3s; | |
| min-width: 0; | |
| } | |
| .card-icon { | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg,#b3c6ff,#fbc2eb); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 2rem; | |
| color: white; | |
| font-weight: bold; | |
| box-shadow: 0 1px 6px #b3c6ff22; | |
| flex-shrink: 0; | |
| transition: width 0.3s, height 0.3s, font-size 0.3s; | |
| } | |
| .card-content { | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| } | |
| .card-title { | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| margin: 0 0 0.3rem 0; | |
| } | |
| .card-desc { | |
| color: #667; | |
| font-size: 0.97rem; | |
| margin: 0; | |
| } | |
| /*------------------------------------------- | |
| Complex Container Queries | |
| --------------------------------------------*/ | |
| /* 1. PANEL: Larger width, make title big and widget background lighter */ | |
| @container panel (min-width: 600px) { | |
| .panel-title { | |
| font-size: 2.2rem; | |
| color: #2e51a2; | |
| } | |
| .widget { | |
| background: #f3f7fc; | |
| } | |
| } | |
| /* 2. WIDGET: Widget wide = card row layout, big icons */ | |
| @container widget (min-width: 350px) { | |
| .card { | |
| flex-direction: row; | |
| } | |
| .card-icon { | |
| width: 64px; | |
| height: 64px; | |
| font-size: 2.5rem; | |
| } | |
| } | |
| /* 3. WIDGET: Widget narrow = card column layout, small icons */ | |
| @container widget (max-width: 220px) { | |
| .card { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 0.6rem; | |
| } | |
| .card-icon { | |
| width: 36px; | |
| height: 36px; | |
| font-size: 1.2rem; | |
| } | |
| .card-content { | |
| text-align: left; | |
| } | |
| } | |
| /* 4. NESTED: Card background changes if panel is large AND widget is large */ | |
| @container panel (min-width: 700px) { | |
| @container widget (min-width: 350px) { | |
| .card { | |
| background: #e4f9ec; | |
| } | |
| } | |
| } | |
| /* 5. CARD: Extra compact if panel is small and widget is small */ | |
| @container panel (max-width: 400px) { | |
| @container widget (max-width: 220px) { | |
| .card { | |
| padding: 0.4rem 0.6rem; | |
| font-size: 0.88rem; | |
| } | |
| } | |
| } | |
| /* 6. STYLE-BASED Container Query: Widget theme */ | |
| .widget[data-theme="warning"] { | |
| --icon-bg: linear-gradient(135deg,#ffb347,#ffcc80); | |
| --card-bg: #fff7e6; | |
| } | |
| @container style(--icon-bg: linear-gradient(135deg,#ffb347,#ffcc80)) { | |
| .card-icon { | |
| background: var(--icon-bg); | |
| } | |
| .card { | |
| background: var(--card-bg,#fff); | |
| } | |
| } | |
| /* 7. Container Query Units: Card title font scales with widget size */ | |
| @container widget (min-width: 220px) { | |
| .card-title { | |
| font-size: clamp(1rem, 0.8rem + 1cqw, 2rem); | |
| } | |
| } | |
| /* 8. Fallback for browsers w/o container queries */ | |
| @supports not (container-type: inline-size) { | |
| .panel-title { font-size: 1.4rem; } | |
| .widget { background: #eaf0fa; } | |
| .card { flex-direction: row; } | |
| .card-title { font-size: 1rem; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Advanced Container Queries Demo</h1> | |
| <p>Resize each panel horizontally to see nested, named, and style-based container queries in action.</p> | |
| <div class="dashboard"> | |
| <div class="panel"> | |
| <div class="panel-title">Personal Overview</div> | |
| <div class="widget"> | |
| <div class="card"> | |
| <div class="card-icon">👩💻</div> | |
| <div class="card-content"> | |
| <div class="card-title">Coding Hours</div> | |
| <div class="card-desc">28 hours this week</div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">📚</div> | |
| <div class="card-content"> | |
| <div class="card-title">Books Read</div> | |
| <div class="card-desc">3 finished this month</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel"> | |
| <div class="panel-title">Team Stats</div> | |
| <div class="widget" data-theme="warning"> | |
| <div class="card"> | |
| <div class="card-icon">⚠️</div> | |
| <div class="card-content"> | |
| <div class="card-title">Pending Reviews</div> | |
| <div class="card-desc">5 pull requests need review</div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">✅</div> | |
| <div class="card-content"> | |
| <div class="card-title">Completed Tasks</div> | |
| <div class="card-desc">12 done this sprint</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel"> | |
| <div class="panel-title">Project Health</div> | |
| <div class="widget"> | |
| <div class="card"> | |
| <div class="card-icon">🚦</div> | |
| <div class="card-content"> | |
| <div class="card-title">Build Status</div> | |
| <div class="card-desc">All systems operational</div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <div class="card-icon">📈</div> | |
| <div class="card-content"> | |
| <div class="card-title">Coverage</div> | |
| <div class="card-desc">98.2% unit tests passing</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment