CssHow-ToBeginner · 4 min read

How to Use Container Query in CSS: Syntax and Examples

Use @container in CSS to apply styles based on the size of a container element instead of the viewport. First, declare a container with container-type, then write @container rules to style children when the container meets size conditions.

📐

Syntax

To use container queries, first mark an element as a container using container-type. Then write @container rules to apply styles when the container matches conditions like width or height.

container-type: size; declares the element as a container that tracks size changes.
@container (min-width: 400px) { ... } applies styles when the container is at least 400px wide.

css

/* Declare container */
.container {
  container-type: size;
}

/* Container query */
@container (min-width: 400px) {
  .child {
    background-color: lightblue;
  }
}

💻

Example

This example shows a box that changes its background color when its container is wider than 300px. Resize the container to see the color change.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  .container {
    container-type: size;
    width: 50%;
    border: 2px solid black;
    padding: 1rem;
    resize: horizontal;
    overflow: auto;
    min-width: 150px;
  }
  .box {
    padding: 1rem;
    background-color: lightcoral;
    transition: background-color 0.3s ease;
  }
  @container (min-width: 300px) {
    .box {
      background-color: lightgreen;
    }
  }
</style>
<title>Container Query Example</title>
</head>
<body>
  <div class="container" aria-label="Resizable container">
    <div class="box">Resize the container to change my color!</div>
  </div>
</body>
</html>

Output

A resizable box with a border. When the container is narrower than 300px, the box background is light coral. When wider than 300px, the box background changes to light green.

⚠️

Common Pitfalls

Common mistakes when using container queries include:

Not setting container-type on the container element, so queries don't work.
Using @media queries instead of @container when you want container-based styles.
Expecting container queries to work on elements without a container ancestor.
Forgetting that container queries respond to the container's size, not the viewport.

css

/* Wrong: No container-type set, container query won't work */
.container {
  /* missing container-type */
}

@container (min-width: 400px) {
  .child {
    color: red;
  }
}

/* Right: container-type set */
.container {
  container-type: size;
}

@container (min-width: 400px) {
  .child {
    color: red;
  }
}

📊

Quick Reference

Summary tips for container queries:

Use container-type: size; on the container element.
Write @container (condition) { ... } to style children based on container size.
Conditions can be min-width, max-width, min-height, max-height.
Container queries respond to container size changes, enabling modular responsive design.

✅

Key Takeaways

Always set container-type on the container element to enable container queries.

Use @container rules to apply styles based on container size, not viewport size.

Container queries allow components to adapt their styles independently inside different sized containers.

Common mistakes include forgetting container-type or confusing container queries with media queries.

Container queries improve responsive design by making styles modular and container-aware.