Container queries

Container queries are a newer CSS feature (that is well supported), that solves a key issue with media queries: What happens if an element ends up in a narrow space when the viewport is large?

See the Pen container query basics by Kevin (@kevinpowell) on CodePen.

A container query looks a lot like a media query:

@container () {
  /* styles here */
}

There is one very big difference, however: Container queries look for the nearest defined container. If you don’t have one, they don’t do anything.

We can define a container using the container-type property:

.container-queries-know-how-wide-i-am {
  container-type: inline-size;
}

/* you can also do this, but you probably won't use it often */
.container-queries-know-my-width-and-height {
  container-type: size;
}

This often means an extra layer in your HTML.

<div class="card-container">
  <article class="card"> ... </article>
</div>

Additional Resources

• I have a video looking at both media queries and container queries that compares them, and goes a bit deeper on container queries than I have here
• Another video of mine that looks at a more advanced usage of them
• Container Queries: a Quick Start Guide by David A. Heron
• A Friendly Introduction to Container Queries and Container Queries Unleashed by Josh Comeau
• An interactive Guide to Container Queries by Ahmad Shadeed