Container Queries

Element queries, container types, and component-level responsive design.

Overview

Container queries style elements based on their parent's size.

Key Concepts

• container-type — Define query container
• container-name — Named containers
• @container — Query container size
• Container queries — Component responsiveness
• CQ units — Container-relative units

Code Examples

/* Basic container query */
.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
  
  .card-image {
    flex: 0 0 200px;
  }
}

/* Named containers */
.widget-wrapper {
  container-type: inline-size;
  container-name: widget;
}

@container widget (min-width: 300px) {
  .widget-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* Multiple queries */
.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (max-width: 200px) {
  .sidebar-nav {
    display: none;
  }
}

@container sidebar (min-width: 201px) and (max-width: 400px) {
  .sidebar-nav {
    display: flex;
    flex-direction: column;
  }
}

@container sidebar (min-width: 401px) {
  .sidebar-nav {
    display: flex;
    flex-direction: row;
  }
}

/* CQ units */
.responsive-text {
  font-size: max(1rem, 3cqi);
}

/* Container query support check */
@supports (container-type: inline-size) {
  .container-query-support {
    container-type: inline-size;
  }
}

/* Component patterns */
.product-card {
  container-type: inline-size;
}

@container (min-width: 450px) {
  .product-card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

@container (min-width: 700px) {
  .product-card {
    grid-template-columns: 300px 1fr auto;
  }
}

/* Responsive form */
.form-group {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .form-row {
    display: flex;
    gap: 1rem;
  }
  
  .form-group {
    flex: 1;
  }
}

Practice

Build a component library with container queries for responsiveness.