Layout Tool
Container Query Preview
Explore CSS Container Queries for responsive components
default
Interactive Demo
Responsive Card
This card adapts to its container, not the viewport.
Container Breakpoints
@sm640px@md768px@lg1024px@xl1280pxExample Code
1<div class="@container">2 <div class="@sm:flex @md:gap-6">3 <img class="@sm:w-1/3" />4 <div class="@sm:flex-1">5 <h3 class="@md:text-xl">Title</h3>6 <p class="@sm:line-clamp-none">Content</p>7 </div>8 </div>9</div>
Key Concepts
@container
Add to parent element to create a containment context. Children can then query this container's size.
@sm:, @md:, @lg:
Like responsive prefixes but based on container size. Use on children of a @container element.
Named Containers
Use @container/name for named containers, then @sm/name: to target specific containers.
CSS Equivalent
1.container {2 container-type: inline-size;3}45@container (min-width: 640px) {6 .card {7 display: flex;8 }9}1011@container (min-width: 768px) {12 .title {13 font-size: 1.25rem;14 }15}