Container Queries: Modernizing React UI

Beyond Media Queries: A New Era for Responsive UI

For years, we’ve relied on media queries to make our web applications look good on different screen sizes. It’s a reliable method, but it has limitations. When a component’s styling depends solely on the viewport size, it can lead to brittle designs. What if a component needs to adapt its layout based on the space it actually occupies within a larger layout, not just the entire browser window?

This is where Container Queries come in. They are a game-changer for component-based architectures like React. Instead of tying styles to the viewport, Container Queries let us tie styles to the dimensions of a parent container. This means a component can be truly responsive to its immediate surroundings, regardless of the overall screen size.

Why Container Queries in React?

React components are designed to be reusable and self-contained. Ideally, a component should know how to render itself appropriately based on its own props and state. Media queries break this encapsulation. A component styled with media queries often needs awareness of the global viewport, or its parent needs to conditionally apply classes based on viewport size. This can become complex and hard to manage, especially in large applications.

Container Queries fix this. They allow us to define styles that are scoped to a specific container element. A card component, for instance, could render differently whether it’s in a narrow sidebar or a wide main content area, all without needing to know about the browser’s width.

How They Work in Practice

To use Container Queries, you first need to establish a container element. This is done by setting container-type and optionally container-name on the element that will act as the reference.

1
.my-card-container {
2
  container-type: inline-size;
3
  container-name: card-container;
4
}

Here, inline-size tells the browser to track the horizontal dimension of this element. container-name gives it a unique identifier if you need to reference it from nested components.

Now, within this container (or its descendants), you can use the @container rule to apply styles based on the container’s size:

1
.my-card {
2
  padding: 1rem;
3
  background-color: lightblue;
4
}
5

6
@container card-container (min-width: 400px) {
7
  .my-card {
8
    padding: 2rem;
9
    background-color: lightgreen;
10
  }
11
}
12

13
@container card-container (min-width: 600px) {
14
  .my-card {
15
    background-color: lightcoral;
16
  }
17
}

In this example, the .my-card element will get different styling depending on whether the .my-card-container is at least 400px wide or 600px wide. The card-container name ensures we’re querying the correct container if there are multiple nested container queries.

Integrating with React

The beauty of Container Queries is that they are a CSS feature. This means they integrate seamlessly with React’s styling solutions. Whether you’re using CSS Modules, styled-components, Emotion, or plain CSS, you can apply these techniques.

Using CSS Modules, for example, you might have:

CardContainer.module.css:

1
.container {
2
  container-type: inline-size;
3
  container-name: card-container;
4
  width: 50%; /* Example width */
5
  margin: 1rem;
6
  border: 1px solid black;
7
}

Card.module.css:

1
.card {
2
  padding: 1rem;
3
  border-radius: 8px;
4
  background-color: #f0f0f0;
5
}
6

7
/* Apply styles when the container is at least 300px wide */
8
@container card-container (min-width: 300px) {
9
  .card {
10
    background-color: #e0ffe0;
11
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
12
  }
13
}
14

15
/* Apply styles when the container is at least 500px wide */
16
@container card-container (min-width: 500px) {
17
  .card {
18
    background-color: #ffe0e0;
19
    padding: 1.5rem;
20
  }
21
}

Card.jsx:

1
import React from 'react';
2
import styles from './Card.module.css';
3

4
function Card({ title, content }) {
5
  return (
6
    <div className={styles.card}>
7
      <h3>{title}</h3>
8
      <p>{content}</p>
9
    </div>
10
  );
11
}
12

13
export default Card;

App.jsx:

1
import React from 'react';
2
import CardContainer from './CardContainer.module.css';
3
import Card from './Card';
4

5
function App() {
6
  return (
7
    <div>
8
      <div className={CardContainer.container}>
9
        <Card title="Short Card" content="This card might be in a smaller space." />
10
      </div>
11
      <div className={CardContainer.container}>
12
        <Card title="Tall Card" content="This card is in a much wider space, it should look different." />
13
      </div>
14
    </div>
15
  );
16
}
17

18
export default App;

This setup allows the Card component to adapt its appearance based on the width of its direct parent div (the container), achieving true component-level responsiveness.

Browser Support and Future

Container Queries have excellent browser support in modern browsers. This makes them a practical tool to start using today. As more developers adopt them, we’ll see more sophisticated component libraries and design systems emerge that leverage this powerful CSS feature. It’s an exciting time for front-end development, offering a more robust and maintainable way to build responsive interfaces.

Final Thoughts

Container Queries are not a replacement for media queries entirely. Viewport-based responsiveness still has its place. However, for creating genuinely adaptive UI components that work well in complex layouts and reusable patterns, Container Queries are essential. They bring responsiveness back to the component level, aligning perfectly with how we build UIs in React. Start experimenting with them; you’ll find your component design process becomes much cleaner and your UIs more robust.