CSS: Container Queries

Container queries let you style elements based on their container's size, not just the viewport size.

Container queries are an alternative to media queries, which apply styles to elements based on viewport size or other device characteristics.

Browser support: ✅ Good (March 2022)

Example:

.parent {
  container-name: hero-banner;
}
 
/* When the container is greater than 60 characters... */
@container hero-banner (width > 60ch) {
  .child { 
    flex-direction: row;
  }
}