SayUI
← Library→ Turn this into a prompt
Layout & grid

Container Queries

Let a component adapt to its container’s width—not the viewport—so reusable UI actually reuses.

Also known as @container · component-level responsive · container-type

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Container Queries".

Make the stat card container-responsive: parent gets container-type: inline-size; @container (min-width: 380px) switches stacked to side-by-side; the number’s font-size uses cqi. Do not use viewport media queries for this component—it must behave in both sidebar and main column.

Anatomy:
- container-type: Parent must declare container-type: inline-size before queries work.
- @container: Same shape as media queries, measuring the container.
- cqw / cqi: Lengths relative to container width—great for fluid type.

Preferred API / pattern: `CSS @container / Tailwind @container utilities`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Forgot container-type
  • ○Avoid: Putting container-type on the component itself
  • ○Avoid: Mixing container and viewport rules in one component
  • ○Avoid: container-type on a scroll container

In plain wordsHow people search for it

“the card changes layout based on its own width, not the whole screen”“same component stacks in the sidebar and goes side-by-side in the main column”“media queries but for the box the component lives in”

AnatomyOpen for part names

container-type
Parent must declare container-type: inline-size before queries work.
@container
Same shape as media queries, measuring the container.
cqw / cqi
Lengths relative to container width—great for fluid type.

How to write itOpen for stack patterns

Web (HTML/CSS)container-type: inline-size + @container (min-width: 400px)
React + Tailwind + shadcn/uiCSS @container / Tailwind @container utilities
SwiftUIViewThatFits / containerRelativeFrame / GeometryReader sparingly
Ant DesignCSS container queries on card wrappers (no dedicated antd API)

Notes

Viewport breakpoints fail reusable cards: a 300px sidebar on a 1200px page still “sees” desktop. Container queries ask “how wide am I?” which is what component systems need. Declare container-type on the parent, then @container like a media query. Browser support has been solid since 2023. Cards, list rows, and stat blocks benefit first.

Common mistakesHumans and models trip here

  • Forgot container-type: @container silently does nothing—first thing to check.
  • Putting container-type on the component itself: queries measure an ancestor container; declare outside.
  • Mixing container and viewport rules in one component: two brains fighting—prefer containers inside the component.
  • container-type on a scroll container: new containing block can re-position absolute children—watch side effects.

More failure symptoms on AI broke it.

Related patterns

Responsive BreakpointsViewport-width tiers that switch layout rules—write mobile-first, enhance upward.CardA contained surface grouping related content and actions as one unit.Grid SystemSplit the page into N equal columns (usually 12) and size blocks by how many columns they span.

Spotted a wrong name or missing pattern?

Message on X