📦 container-type — Enabling Container Queries in CSS

🌐 What is container-type?

container-type is a CSS property used to turn any element into aqueryable container, meaning its size can be used inside @containerrules to make component-level responsive designs. Without container-type, container queries will NOT work.

>>“container-type is the switch that turns ordinary elements into responsive containers.”

Note

✔ Supported in all modern browsers (Chrome, Firefox, Safari, Edge).

🎯 Why Do We Need container-type?

  • To enable @container queries
  • To make components respond to parent size instead of viewport
  • For modular, reusable, truly responsive UI design
  • To control when and how a container becomes queryable

📌 Syntax

container-type Syntax

container-type: inline-size | size | normal;
ValueDescription
inline-sizeMakes the container respond to width only
sizeMakes the container respond to both width and height
normalDefault — NOT a queryable container

Note

💡 95% of the time you’ll use inline-size.
---

🧱 Example 1 — Enabling a Container

Enable container for width queries

.card {
  container-type: inline-size;
  padding: 20px;
}

Now you can use @container rules targeting this card’s width.

For example:

@container usage

@container (min-width: 400px) {
  .card-title {
    font-size: 2rem;
  }
}

The title grows only when the card (NOT the viewport) becomes 400px wide.

---

🧱 Example 2 — Using container-type: size

Use this when you need height-based container queries.

Container reacting to width + height

.box {
  container-type: size;
}

@container (height > 300px) {
  .box-content {
    flex-direction: row;
  }
}

This layout changes only when the box becomes taller than 300px.

---

🎨 Visual Breakdown

Media content
---

📦 Combining container-type with container-name

Named Containers

.section {
  container-type: inline-size;
  container-name: layout;
}

@container layout (min-width: 700px) {
  .menu {
    display: flex;
  }
}

Naming allows you to target specific containers rather than relying on structure.

---

📱 Real World Example — Responsive Card Component

Responsive Card with container-type

.card {
  container-type: inline-size;
  border: 1px solid #ccc;
  padding: 20px;
}

.card-content {
  display: flex;
  flex-direction: column;
}

@container (min-width: 500px) {
  .card-content {
    flex-direction: row;
    gap: 20px;
  }
}

This card becomes two-column only when its container grows — even if the viewport is still small.

---

⚠️ Important Rules

  • container-type MUST be set on the element you want to query
  • You do NOT need to set overflow or dimensions manually
  • Nested containers each have their own query context
  • Use inline-size unless height sensitivity is required
  • container-type does NOT affect layout — it only enables queries

Note

🧠 container-type simply makes the element “watchable” for size changes.
---

🔥 Summary

container-type is the key property that unlocks component-level responsive design with container queries. By defining whether a container reacts to width, height, or both, you gain full control over how components adapt inside any layout.

>>“Without container-type, there are no container queries — it’s the foundation of responsive components.”

Learn more →MDN Docs 📘