Suggest an edit

Improve this article

Refine the answer for “What are container queries? How do they differ from media queries?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Container queries** are a CSS mechanism that lets you change styles **depending on the size of the container itself**, inside which the element is located.
Logically, they work the same way as media queries, but **they target not the viewport, but the parent block**.

---

### **Example of a container query**

```css
.card {
  container-type: inline-size; /* enable container measurement */
}

@container (max-width: 500px) {
  .title {
    font-size: 18px;
  }
}
```

Here, `.title` will change its font size **only if the width of the .card container is ≤ 500px**, not the width of the browser window.

---

### **How they differ from media queries**

| Characteristic | Media Queries | Container Queries |
|---|---|---|
| What they respond to | Viewport size | Container size |
| Where they are applied | Global adaptation of the whole page | Local adaptation of a component |
| Approach | "page → components" | "components → independent adaptation" |
| Problem they solve | Rearranging for screens | Universal, reusable components |

---

### **Key idea**

- **Media queries**: adapt the layout "from the outside", based on the screen.
- **Container queries**: adapt components "from the inside", independent of the surroundings.

**Summary:** container queries are the next stage after media queries. They let you create fully **reusable, independent, and responsive components** that are not tied to the width of the entire screen.

If needed - I can show an example of a real UI that broke with media queries and was fixed with container queries.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts255 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.