Component-Aware Container Queries

Media queries respond to viewport size, but components do not always live at viewport scale: a card might render in a sidebar at 240px or in a feature row at 800px. Container queries let a component style itself based on its own width. This snippet covers the basic `@container` rule, the size container with named breakpoints, and the style container variant for theming children based on parent state.

CSS

Hard

css-selectors

css-responsive-design

css-media-queries

code-template

819 views

Basic size container

Ask AI

.card-grid {
    container-type: inline-size;
}

.card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 1rem;
}

@container (min-width: 480px) {
    .card {
        grid-template-columns: 120px 1fr;
    }
}

container-type: inline-size opts an element into being a query container, scoped to its inline (horizontal) dimension. Children of that container can then write @container (min-width: ...) rules that fire based on the container width, not the viewport. The breakpoint 480px here is the container's own width, so the same .card reflows to a two-column layout whether it lives in a sidebar or a wide hero, just based on the room it has. This is what unlocks truly self-aware component design without prop drilling breakpoints.

2 more snippets in this entry are available for premium members.

Upgrade to Premium

Back to Code Snippets