Explain CSS Container Queries with Example

Trisha Dangol  /   February 5, 2024  /   CSS

---

Container queries are an exciting new feature in CSS that allows styling elements based on the size of their parent container, rather than just the viewport. This opens up powerful new possibilities for responsive design.

In this article, we’ll explain what container queries are, why they’re useful, and how to use them effectively with some examples.

What are Container Queries?

Container queries are a new type of media query that lets you apply styles based on the size of a parent element, rather than the entire viewport.

For example, you can write styles that target an element only when its immediate parent container is a certain width:

@container (min-width: 500px) {
/* Styles here only apply when parent is 500px wide */
}

This allows much more contextual styling based on the environment where components are placed.

Container queries complement media queries, whose style is based on the viewport width. Media queries are great for overall responsiveness, while container queries offer more control over styling in specific contexts.

Browser support for container queries is still limited but can be unlocked with some JavaScript polyfills.

Why Container Queries are Useful

Here are some of the main benefits that container queries bring:

More Responsive Component Design

With container queries, you can style a component based on the specific parent container it’s rendered in. This enables more responsive designs without hacky workarounds.

For example, horizontal navigation can flex or stack based on whether its parent is wide:

.nav {
flex-direction: row;
} @container (max-width: 500px) {
.nav {
flex-direction: column;
}
}

Consistent Width Ratios

You can use container queries to maintain width ratios between elements as the page scales.

For example, sizing a sidebar to be 25% the width of the container:

.sidebar {
width: 25%;
}

This stays proportional even if the parent changes.

Better Vertical Rhythms

Container queries unlock new vertical rhythm possibilities by letting you style based on parent line height, font size, or height.

For example:

@container (line-height: 1.2) {
p {
line-height: 1.2;
}
}

This allows descendant text to harmonize with the vertical rhythm of its context.

Nesting Component Variants

With container queries, you can nest styling variations for a component in one place rather than using separate classes.

For example:

.notification {
/* default styles */
}
@container (width >= 500px) {
.notification {
/* wide styles */
}
}

The component stays encapsulated rather than using .notification-wide classes.

In Summary

• Container queries let you style elements based on parent container width, line-height, or other properties.
• They enable more responsive components and consistent width ratios.
• Container queries provide more contextual styling, unlike global viewport-based media queries.
• Browser support is still emerging but can be polyfilled.

How to Use Container Queries

Let’s look at how to apply container queries in your CSS.

The basic syntax is:

@container <media-feature> {
/* Styles here */
}

Where <media-feature> can be a width, height, or other container property like min-width, max-width, min-height, etc.

For example:

@container (min-width: 500px) {
/* Styles for 500px wide container */
}

You apply this query around rules for elements you want to style based on parent width.

Some things to note:

• The @container rule must be nested inside the element you want to style. Container queries don’t work at the root.
• The @container rule inherits its parent container’s width – not necessarily the immediate parent element.
• Fallback styles outside the container query act as defaults.
• You can combine @container it with regular @media queries for powerful effects.

Now let’s see some example layouts with container queries.

Responsive Side-by-Side Sections

For this layout, when the container is wide we show two <section> side-by-side. When narrow, they stack vertically:

<div class="container">
<section>Section 1</section>
<section>Section 2</section>
</div>

.section {
width: 50%;
float: left;
}

@container (max-width: 600px) {
.section {
width: 100%;
float: none;
}
}

The styles inside the @container rule only apply when the parent is less than 600px wide.

Proportional Container

This example maintains a 25% width ratio between a sidebar and main content using container queries:

<main class="container">
<aside>Sidebar</aside> 
<div class="content">Content</div>
</main>

.sidebar {
width: 25%;
float: left;
}

.content {
width: 75%;
float: right;
}

By using percentage-based widths and container queries, the sidebar and content remain proportional as the parent <main> scales.

Responsive Typography

Here we style the <body> font-size based on the parent container’s line-height:

body {
line-height: 1.4;
}

@container (line-height: 1.2) {
body {
font-size: 1.2rem;
}
}

@container (line-height: 1.6) {
body {
font-size: 1.4rem; 
}
}

This allows text size to scale fluidly with the vertical rhythm of the parent container.

When Not to Use Container Queries

While container queries are powerful, they aren’t a replacement for media queries in all cases.

Situations where container queries may not help:

• Styling based on overall viewport dimensions – container queries are best for components.
• Component instances in totally dynamic containers – styles may conflict.
• Very nested elements where inheritance is complex.

In general, use media queries for overall responsive adjustments and container queries for component-level styles.

Conclusion

Container queries open up excellent new possibilities for responsive component design systems. By letting you style based on parent width, height, or line-height, container queries enable more contextual styling.

While browser support is still emerging, JavaScript polyfills allow us to access container queries today. Used judiciously, they can create more elegant responsive behaviors without hacks.

However, take care not to overuse container queries where regular media queries may suffice. Find a balance between the two types of queries for optimal responsive experiences.

I hope this article gave you a good overview of how to use CSS container queries! Experiment with adding them to your projects and let me know if you have any other questions.