Container Queries and Component-Level Responsiveness

Viewport media queries respond to the viewport or another media feature. Container queries allow a component to respond to the size of a designated containing element.

This distinction matters in component-based applications. A card might appear in a wide dashboard column or a narrow sidebar without changing its component implementation. A container query lets the card adapt to the space actually available to it.

Sass can organize and reuse container-query declarations, but container-query behavior itself is a native CSS feature. Use container-type to establish an appropriate query container and write @container rules for the desired conditions.

Responsive Card Container

.card-list {
  container-type: inline-size;
}

.product-card {
  display: grid;
  gap: 1rem;
}

@container (min-width: 32rem) {
  .product-card {
    grid-template-columns: 10rem 1fr;
    align-items: center;
  }
}

💡 The .card-list element establishes an inline-size query container. The product card changes its layout when the relevant container reaches the specified width. The container must be an appropriate ancestor of the element being queried. Test the component in different parent layouts to verify the intended behavior.

Knowledge Check

What determines when an inline-size container query rule becomes active?

Container Queries and Component-Level Responsiveness

STAY UPDATED WITH BYTES!