Language 8 of 10 · Topic 0.7

Responsive Web Design: Container Queries (@container) vs Media Queries (@media)

1Concept

Media Queries (@media (max-width: 768px)) query viewport dimensions. Container Queries (@container (max-width: 400px)) query parent container dimensions, enabling modular micro-components.

2Architecture Diagram

@media (max-width: 768px)       ──► Responsive to BROWSER WINDOW
@container (min-width: 350px)   ──► Responsive to PARENT COMPONENT WIDTH!

3Code Example

Stage 0 Language Foundations
.card-wrapper {
    container-type: inline-size;
}

@container (min-width: 400px) {
    .card {
        display: flex;
        flex-direction: row;
    }
}

4Expected Output

[Card switches to horizontal layout whenever parent container exceeds 400px]

5Key Takeaways

  • Container queries allow building self-contained responsive components.
  • Design mobile-first with min-width media queries.
  • Combine flex-wrap with container queries for resilient layouts.