Answer
A container query applies styles according to a containing element rather than the viewport. • An ancestor must establish an appropriate query container. • Size queries test container dimensions; style queries can test supported style features. • They allow reusable components to adapt to where they are placed.
💡 Simple Example
.card-list { container-type: inline-size; }
@container (width > 30rem) { .card { grid-template-columns: 10rem 1fr; } }
⚡ Quick Revision
Container queries adapt a component to its container’s conditions.