Skip to content

Software Engineer at Heydoc

CSS Container Queries — a revolution for responsive web design

First things first! It’s a super early stage for CSS Container Queries, so everything here may change at any moment. For now, Google Chrome Canary with #experimental-container-queries flag enabled is the only option to play around with it. I’m so excited about this subject, I couldn’t resist scribbling down a quick post about it.

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!

Post component with container 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 {
  contain: layout inline-size style;
}

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

The contain 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). There is a chance that we will be able to do crazy stuff like named containers in the future. We can add this property on some general layout section (like the sidebar), but its power shines when we use it on a component level basis.

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

👆 you can use Markdown here

Your comment is awaiting moderation. Thanks!