CSS Container Queries — a revolution for responsive web design

There’s no other feature that web designers have asked for more than being able to style elements based on the size of their parent. There were many attempts to solve this problem by attaching resize event on the element or using ResizeObvserver (“The Resize Observer explained” is for you if you’re not aware of it). Luckily, thanks to smart people like Miriam Suzanne, there’s great progress on the native implementation of CSS Container Queries defined as part of the CSS Containment Module Specification.

CSS Container Queries in practice

For this article, I created a super simple card component that changes the layout based on the container’s inline size (width). Not too creative but works great as an example. Look ma, no media queries!

<div class="post">
  <div class="post__wrapper">
    <div class="post__thumb">pic</div>
    <div class="post__content">
      <h1 class="post_title">Super cool title</h1>
      <time class="post_time" datetime="2021-06-21">2021.06.21</time>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem eveniet
        nemo quas quam delectus natus quae, maiores animi ut ducimus tenetur
        dignissimos? Rem, doloremque optio labore illo expedita sit suscipit
        voluptas sapiente cupiditate aspernatur sint!
      </p>
    </div>
  </div>
</div>

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

@container post-container (min-width: 400px) {
  .post__wrapper {
    display: grid;
    grid-template-columns: 4.8rem 1fr;
    grid-gap: 1.6rem;
  }
}

The container-type property creates a containment context. The inline-size creates a query container that reacts to changes on the inline axis (width). We can also use block-size to be able to adjust styling based on elements block axis (height), size to react to changes on both axis, style to react to style changes and state to react to state queries. The container-name allows us to add a descriptive name to a container.

The new @container rule allows us to style elements based on the size of the containment context. A lot like @media query, but better!

See the Pen css-container-queries by Pawel Grzybek (@pawelgrzybek) on CodePen.

Do we still need media queries? Yes!

Container queries are here not to compete with media queries, but to work together with them. There is still a valid use case for good old @media queries for things like general layout changes, overrides to custom properties, user preferences, print styles etc. “Media Queries in Times of @container” by Max Böck goes in-depth about the subject.

Finally

I really believe that CSS Container Queries is the biggest revolution since Ethan Marcotte coined the term “Responsive Web Design” in 2010. Let me leave you here with a great episode of the Syntax.fm podcast where you can learn a bunch more about the future of CSS — CSS Container Queries, Layers, Scoping and More with Miriam Suzanne. For now, stay curious and build cool web stuff 👌

Leave a comment