How do you create a responsive grid layout using Tailwind CSS container queries with minimal code?

Tailwind CSS container queries enable responsive grid layouts based on parent container size rather than viewport, using @container on the parent and @sm:, @md: prefixes on children for truly component-based responsiveness.

Mark the grid container with @container class, then use @md:grid-cols-2 or @lg:grid-cols-3 on child elements to change the layout when the container reaches those sizes. This creates self-contained, reusable responsive components that work regardless of page layout, perfect for design systems and modular UIs with minimal markup.

Code

<!-- Parent container with container query -->
<div class="@container max-w-4xl mx-auto p-6">
  <!-- Grid items respond to container size -->
  <div class="@md:grid-cols-2 @lg:grid-cols-3 grid grid-cols-1 gap-6">
    <div class="bg-white p-6 rounded-lg shadow-md">Card 1</div>
    <div class="bg-white p-6 rounded-lg shadow-md">Card 2</div>
    <div class="bg-white p-6 rounded-lg shadow-md">Card 3</div>
  </div>
</div>