Container Queries

Add cq to any parent element and children respond to that element's size instead of the viewport. Critical for truly reusable card components that live in sidebars, modals, or narrow columns.

Grid inside cq container

The grid below responds to its parent container width — try resizing the container, not the viewport.

↔ Drag to resize this container

Card 1

Responds to container

Card 2

Not the viewport

Card 3

True reusability

<!-- Mark the parent as a container -->
<section cq>
  <div layout="grid" cols="1">
    <!-- Grid reflows at 480px and 720px container width, not viewport -->
    <div surface="glass" density="spacious" radius="xl">Card 1</div>
    <div surface="glass" density="spacious" radius="xl">Card 2</div>
    <div surface="glass" density="spacious" radius="xl">Card 3</div>
  </div>
</section>

Row that stacks in narrow containers

↔ Drag narrow to see stacking

Main content

Grows to fill

Sidebar

Fixed width

<div cq>
  <div layout="row" adaptive gap="md">
    <div surface="matte" density="default" radius="lg" grow>Main content</div>
    <div surface="matte" density="default" radius="lg" style="width:140px;">Sidebar</div>
  </div>
</div>

Why this matters

/* Old world: viewport breakpoints break reusable components */
@media (max-width: 768px) { .card-grid { grid-template-columns: 1fr; } }
/* — fails when the grid is in a narrow sidebar on a wide screen */

/* aura: cq makes the grid respond to its actual space */
<section cq>
  <div layout="grid">  <!-- reflows at 480px/720px container width -->
  </div>
</section>

/* Container breakpoints used internally */
/* @container (max-width: 479px)  → 1 column  */
/* @container (480px – 719px)     → 2 columns */
/* @container (min-width: 720px)  → auto-fit  */