Media queries (@media (min-width: ...)) evaluate the global browser viewport, not the element's actual rendering context. A card component rendered inside a narrow 300px sidebar behaves identically to one rendered in a full 1200px content area unless custom contextual parent classes are written. Container queries (@container (min-width: ...)) evaluate the size of the immediate parent container (container-type: inline-size), enabling truly modular, self-contained responsive components that adapt wherever they are placed in a layout.

In standard CSS Grid, child items establish their own independent formatting contexts; their internal elements (such as titles, descriptions, and action buttons) cannot align with elements in neighboring cards if content lengths vary. By setting grid-template-rows: subgrid on a child grid, the child adopts the row tracks of its parent grid, ensuring that all card headers, card bodies, and card footers across an entire row maintain pixel-perfect horizontal alignment regardless of text length.

Container query units represent a percentage of the query container's dimensions: 1 cqw equals 1% of the container's width, 1 cqh equals 1% of height, 1 cqi equals 1% of inline size, and 1 cqb equals 1% of block size. They allow fluid typography (font-size: clamp(1rem, 4cqi, 2.5rem)) and proportional padding that scale seamlessly based on the container itself rather than the global viewport width.

Yes. Both CSS Container Queries (Size Queries) and CSS Grid Subgrid are fully supported across all evergreen browsers (Chrome 105+, Safari 16+, Firefox 110+, Edge 105+). Combining @container with subgrid represents the modern standard for design systems, eliminating fragile JavaScript ResizeObserver loops and complex flexbox height equalizers.