Container Queries in CSS (@container)

Responsive design usually relies on media queries (@media), which adapt layouts based on the viewport size.

But sometimes, a component needs to adjust to its parent container, not the whole screen.

That’s where CSS Container Queries (@container) help. They let elements respond to their container’s size, making components modular, reusable, and flexible across different layouts.

Why Use Container Queries?

• Component-friendly: Ideal for frameworks like React, Vue, and Angular.
• Reusable layouts: Cards, widgets, and sidebars adapt anywhere.
• Local control: Styles respond to the parent, not the screen.
• Simpler CSS: Fewer breakpoints and overrides.
• Future-ready: A smarter approach than traditional media queries.

Media Queries vs Container Queries

• Media Queries → Media queries adapt layouts to the device.
• Container Queries → Container queries adapt components to their parent container.

How to Use Container Queries

1: Define a Container

To enable container queries, you must declare a parent element as a query container:

container-type

• inline-size → tracks the width only.
• size → tracks both width and height.

container-name

• Useful if you want to target a specific container in your query.

.container {
  container-type: inline-size; /* enables queries based on container width */
  container-name: card;        /* optional name for targeting */
}

2: Write a Container Query

• Works like @media, but applies to the container, not the viewport.
• If you use named containers, you can target them specifically:

@container (min-width: 40rem) {
  .component {
    display: flex;
    gap: 1rem;
  }
}

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

Example 1: Responsive Card Layout

The card stacks vertically in small containers and becomes a row layout in wider ones.

<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Example">
    <p>This is a responsive card using container queries.</p>
  </div>
</div>

.card-container {
  container-type: inline-size;
  container-name: card;
  max-width: 600px;
  margin: auto;
}

.card {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 10px;
}

/* Switch to vertical when container is narrow */
@container card (max-width: 400px) {
  .card {
    flex-direction: column;
    text-align: center;
  }
}

Example 2: Adaptive Sidebar Layout

The sidebar automatically stacks under the content if the parent container is too narrow.

<div class="layout">
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main Content</main>
</div>

.layout {
  display: flex;
  container-type: inline-size;
  gap: 1rem;
}

.sidebar {
  flex: 1;
  background: #ddd;
}

.content {
  flex: 3;
  background: #fff;
}

/* When container is narrow */
@container (max-width: 600px) {
  .layout {
    flex-direction: column;
  }
}

Example 3: Grid of Cards (Each Card Adapts Independently)

Each card responds based on its own width, not the overall grid or viewport.

<div class="grid">
  <div class="grid__item card">Card 1</div>
  <div class="grid__item card">Card 2</div>
  <div class="grid__item card">Card 3</div>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.grid__item {
  container-type: inline-size; /* each grid item acts as its own container */
}

.card {
  border: 1px solid #ccc;
  padding: 1rem;
  background: #fafafa;
}

/* Each card adapts individually */
@container (min-width: 28rem) {
  .card {
    display: flex;
    justify-content: space-between;
  }
}