Web DevelopmentTutorials

CSS Container Queries: The Layout Revolution

Forget media queries for components. Container queries let components respond to their own size, enabling truly reusable layouts.

Mbeah Essilfie

June 27, 2026 at 06:03 AM

8 min read 1236 views

CSS Container Queries: The Layout Revolution

The Problem with Media Queries

Media queries respond to the viewport size. But components don't live in the viewport — they live in containers that can be any size.

A card component in a sidebar needs different styles than the same card in the main content area. Media queries can't solve this.

Container Queries to the Rescue

/* Define a containment context */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* Style based on container width */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

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

With Tailwind CSS

Tailwind v3.4+ supports container queries natively:

<div class="@container">
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
    <img class="w-full @md:w-48 rounded" src="..." alt="..." />
    <div class="@md:flex-1">
      <h3 class="text-lg @lg:text-xl font-bold">Card Title</h3>
      <p class="text-sm @lg:text-base text-gray-600">Description...</p>
    </div>
  </div>
</div>

The @container class creates a containment context. Then use @sm:, @md:, @lg: prefixes instead of sm:, md:, lg: to query the container instead of the viewport.

Real-World Example: Responsive Card

<template>
  <div class="@container">
    <article class="
      flex flex-col gap-3
      @sm:flex-row @sm:gap-4
      @md:gap-6
      bg-white dark:bg-gray-800 rounded-xl p-4 @md:p-6
    ">
      <img
        :src="post.image"
        class="rounded-lg w-full @sm:w-32 @md:w-48 aspect-video object-cover"
      />
      <div class="flex-1 min-w-0">
        <h3 class="font-semibold text-base @md:text-lg truncate">
          {{ post.title }}
        </h3>
        <p class="hidden @sm:block text-sm text-gray-500 line-clamp-2">
          {{ post.excerpt }}
        </p>
      </div>
    </article>
  </div>
</template>

Container queries are supported in all modern browsers (Chrome 105+, Firefox 110+, Safari 16+). For older browsers, the component falls back to the mobile/default layout — a perfectly graceful degradation.