Container Queries in CSS
From the CSS cheat sheet · Media Queries & Responsive · verified Jul 2026
Container Queries
Style components based on their container size, not the viewport
css
.card-wrapper {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { display: flex; gap: 1rem; }
}
@container (min-width: 600px) {
.card { font-size: 1.25rem; }
}💡 Container queries let components adapt to where they are placed, not just viewport size
⚡ The same .card component can have different layouts in a sidebar vs main content area
📌 Set container-type: inline-size on the parent — then @container queries check ITS width
🟢 Container query units (cqi, cqb) are like vw/vh but relative to the container
container-queriesresponsivecomponents