CSS Container Queries: A New Approach to Responsive Web Design

Container queries are a new CSS feature making big waves. They let websites shift away from designs based on page size to a container-based approach, part of a larger evolution in the design ecosystem.

Containers allow you to add styles to elements, like font sizes, colors, and layout widths, based on the parent container. This is a whole new approach to responsive design, which formerly relied on the viewport size.

For instance, on a website where an element is in a hero section or a grid on a page, the element will change sizes based on the container, not the viewport.

Container queries use breakpoints similar to how media queries do. The big difference is that the @container responds to its parent container, while @media follows the viewport and user agent.

Container Query Example

The HTML:

<div class="element-container"> <div class="links">...</div> </div>

The CSS:

.element-container {
  contain: size layout;
}

@container (max-width: 1200px) {
  .links {
    color: blue;
  }
}

Initially, the parent element’s containment is defined. That’s followed up with a @container query, which styles the container based on size. The code above uses max-width, and sets the links to color to blue, when the container is less than 1200px wide.

A New Approach to Responsive Design

Container queries empower developers to increase user customization with improved component-based designs, going beyond viewport limitations.

Many are calling this the next era of responsive design, including Enlear Academy which added that the CSS container query is “definitely a long-awaited feature.”

Container queries bring a new way to create responsive designs for mobile, giving developers the ability to re-layout designs based on smaller elements within a larger page’s viewport rules.

Using @container begins with establishing a parent element with containment.

One limitation worth noting: Height-based container queries are not currently possible. To make grid children function with @container, a wrapper element is needed.

To Give Container Queries a Try…

You can try your own tests with the @container property.

Navigate to: chrome://flags in Chrome Canary. Canary is a testing browser for developers that wish to be early adopters of @container queries.

There, you’ll turn on the Enable CSS Container Queries setting. This will enable support for @container, inline-size and block-size values for the contain property, and the LayoutNG Grid implementation.

If you need help utilizing @container queries on your website, contact the web development experts at Hall.