Container queries

A component can appear in a wide page, narrow sidebar, or dialog. Container queries let its layout respond to the available space in that region.

Start with intrinsic sizing, flex-wrap, or minmax() when they handle the layout naturally. Add a container query when the arrangement needs to change at a specific width. Use viewport media queries for page-wide decisions such as switching navigation to a drawer.

Define a query container

Set container-type: inline-size on an ancestor. A name helps a query select the intended container when several ancestors establish containment.

.layout-region {
  container-type: inline-size;
  container-name: content-well;
}

@container content-well (width > 500px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

The card changes when content-well is wide enough, even if the viewport is much wider. Choose the threshold from the content's needs and test the component in each region where it will be used.

Container-relative units

1cqi is 1% of the query container's inline size. cqmin uses the smaller of its inline and block dimensions. These units can make local padding or sizing follow the container.

Espalier's shared fluid type and spacing tokens use viewport-based formulas. Do not assume that placing a component in a query container changes those formulas to container units.

See layout for the Grid and Flexbox conventions and browser support for the required browser versions.