🌐 What is @container?

@container is a modern CSS at-rule that enablescontainer queries — meaning elements can adapt based on the size of their parent container instead of the entire viewport! This solves one of the biggest limitations in responsive design.

🎯 Why Do We Need @container?

📌 How @container Works

Two steps:

1. Enable containment on a parent container.
2. Write container queries that react to the container’s size, not the viewport.

🧱 Step 1 — Enable Containment

Apply container-type to a parent element:

.card {
  container-type: inline-size; /* reacts to width only */
}

inline-size → listens to width
size → listens to width + height

🧱 Step 2 — Write a Container Query

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

The `.title` becomes larger only when its parent container becomes 400px wide — not the viewport.

📐 Visual Example

🔥 Full Component Example

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

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

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

When the card becomes wide enough, the layout switches to side-by-side view (even if the viewport is still small!).

🎨 Responsive Typography Using @container

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

@container (min-width: 600px) {
  h1 {
    font-size: 3rem;
  }
}

@container (max-width: 599px) {
  h1 {
    font-size: 2rem;
  }
}

The heading adjusts based on section width instead of screen size.

📦 Container Names

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

@container layout (min-width: 800px) {
  .sidebar {
    display: block;
  }
}

Naming allows writing container queries that target specific container types.

🧠 Nested Containers

Container queries work independently for each container — meaning **each component is fully responsive inside its own space**.

📱 Example — Buttons Growing With Container

.button-group {
  container-type: inline-size;
}

@container (min-width: 350px) {
  button {
    padding: 1rem 2rem;
    font-size: 1.2rem;
  }
}

Buttons get larger only when their parent group expands — perfect for toolbars or cards.

🧪 Range Queries + @container (Level 4 Syntax)

@container (400px <= width <= 800px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Works exactly like viewport range queries, but applied to container width.

⚠️ Common Mistakes

🔥 Summary

@container is a groundbreaking feature that makes CSS truly modular and adaptive. It enables components to respond to their available space instead of the entire viewport, making reusable UI systems far more reliable and flexible.

Learn more →MDN Docs 📘