CSS Container Queries: The Future of Responsive Component Design

            return (
    

      
      

        
{product.name}
        
{product.description}
        

          ${product.price}
          Add to Cart
        
      
    
  );
}

        

            display: flex;
  flex-direction: column;
}
        

            .product-card {
    flex-direction: row;
  }
  
  .product-card img {
    width: 200px;
  }
  
  .product-info {
    padding-left: 1rem;
  }
}

        

          .product-container {
  container-type: inline-size;
  container-name: product;
}
        

            .product-card h3 {
    font-size: 0.9rem;
  }
  
  .price-and-action {
    flex-direction: column;
    gap: 0.5rem;
  }
}

        

Container Query Units

Container queries also introduce new relative units:

            /* 10% of the container's width */
  padding: 1cqw;
  
  /* 5% of the container's height */
  margin-bottom: 5cqh;
  
  /* Smaller of cqw or cqh */
  border-radius: 1cqi;
  
  /* Larger of cqw or cqh */
  box-shadow: 0 0 0.5cqb rgba(0, 0, 0, 0.2);
}

        

These units provide a powerful way to create container-relative sizing, similar to how viewport units (vw, vh) work but at the container level.

Style Queries

An evolution of container queries, style queries allow components to adapt based on their container's styles:

          .theme-container {
  container-name: theme;
  container-type: style(--theme --color-mode);
}
        

/* Default light theme styles */ .theme-container { --theme: 'default'; --color-mode: 'light'; --background: #fff; --text: #333; }

/* Dark theme variant */ .theme-container.dark-theme { --color-mode: 'dark'; --background: #222; --text: #f0f0f0; }

/* High contrast variant */ .theme-container.high-contrast { --theme: 'high-contrast'; --background: #000; --text: #fff; }

/* Apply styles based on container style properties */ @container theme (--color-mode: 'dark') { .card { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); } }

              border: 2px solid white;
    box-shadow: none;
  }
}

        

This allows components to adapt to the design system context they're placed in, beyond just size considerations.

Real-World Component Examples

Responsive Navigation Component

A navigation component that transforms based on its container:

            container-type: inline-size;
}
        

.navigation { display: flex; flex-direction: column; }

.navigation .menu-button { display: block; }

.navigation .nav-links { display: none; }

              flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  .navigation .menu-button {
    display: none;
  }
  
  .navigation .nav-links {
    display: flex;
    gap: 1.5rem;
  }
}

        

Adaptive Card Layout System

Cards that change layout based on available space:

            container-type: inline-size;
}
        

.card { display: grid; grid-template-rows: auto 1fr auto; }

.card .media { grid-row: 1; }

.card .content { grid-row: 2; }

.card .actions { grid-row: 3; }

@container (min-width: 380px) { .card { grid-template-columns: 120px 1fr; grid-template-rows: 1fr auto; } .card .media { grid-column: 1; grid-row: 1 / span 2; } .card .content { grid-column: 2; grid-row: 1; } .card .actions { grid-column: 2; grid-row: 2; } }

              grid-template-columns: 200px 1fr;
  }
}

        

Browser Support and Fallbacks

Container queries are now supported in all major browsers, but you may still need fallbacks for older browsers:

          .product-card {
  display: flex;
  flex-direction: column;
}
        

/* Legacy viewport-based media query as fallback */ @media (min-width: 768px) { .product-card { flex-direction: row; } }

            .product-container {
    container-type: inline-size;
  }
  
  /* Container query that overrides the media query in supporting browsers */
  @container (min-width: 400px) {
    .product-card {
      flex-direction: row;
    }
  }
}

        

Building a Component Library with Container Queries

When building a component library, container queries enable truly responsive components regardless of where they're placed:

             function Card({ children, ...props }) {
     return (
       

         
{children}
       
     );
   }
   
        

             /* Card-specific breakpoints */
   @container (min-width: 350px) { /* Styles for medium cards */ }
   @container (min-width: 500px) { /* Styles for large cards */ }
   
   /* Instead of global breakpoints */
   @media (min-width: 768px) { /* Tablet styles */ }
   @media (min-width: 1024px) { /* Desktop styles */ }
   
        

3. **Test components in various containers**: Create a component playground that shows components in different-sized containers for testing.

Conclusion

Container queries represent a fundamental shift in responsive design, moving from page-level to component-level thinking. This approach enables truly reusable components that can adapt to their context rather than just the viewport size.

As we build more complex interfaces with design systems and component libraries, container queries will become an essential tool for creating adaptable, maintainable UI components that work beautifully in any context.

What component design challenges do you think container queries will solve for your projects? Have you started incorporating them into your work?