Quick Note on CSS Container Queries

Container queries are a game-changer for component-based design. Instead of relying on viewport size, we can now style elements based on their container’s dimensions.

Basic Syntax

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

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

Key Benefits

1. True Component Responsiveness: Components adapt to their actual available space
2. Better Reusability: Components work regardless of where they’re placed
3. Cleaner Media Queries: Less complex viewport-based logic

Browser Support

As of 2025, container queries are well-supported in modern browsers:

• Chrome 105+
• Firefox 110+
• Safari 16+

Practical Use Case

Perfect for card layouts in sidebars vs main content areas - the same component can have different layouts based on its container width, not the viewport width.

Live Demo

Check out this CodePen demonstrating container queries in action:

Resources

• MDN Container Queries
• Can I Use

Note: Remember to use container-type: inline-size for width-based queries and consider fallbacks for older browsers.