With container queries, you’ll be able to style an element base on its container’s size, style, and scroll state, but for now (April 2026) only the size option works reliably accross all major browser, so I’ll stick to that in this article.

Syntax

The basics of a container queries are Very similar to media queries:

@media (max-width: 60em) {
  /* [styles] */
}

@container (width > 20em) {
  /* [styles] */
}