Weekend in Lisbon
Three days of tiles, trams and custard tarts, planned so you never queue.
Read the guideTools
Container Query Builder
Components that respond to the space they are given, not to the window. Drag the preview’s corner: the card changes at its own width, and the browser window never moved.
Widely availablesince Aug 2025
Drag the bottom-right corner. Container width: 0px
CSS
Two declarations, not one
The rule needs a container to measure. container-type: inline-size on the parent turns it into
one, and that is the line people forget: without it the query silently never matches. Naming the container
is optional, and worth it as soon as containers nest, because an unnamed query measures the nearest one,
which is not always the one you meant.
A component cannot query itself
The element with container-type is the ruler, and the rules apply to what is inside it. If the
card itself is the container, the query can restyle the card’s children and never the card. That is why the
output wraps the card in a small parent.
cqi: type that follows the component
1cqi is one percent of the container’s inline size, so a heading set in cqi grows
with its card. Keep it inside a clamp() with rem ends, or it will not respond to
zoom: the clamp calculator does that arithmetic with a container basis.
Status and a live demo are on the container queries page.