CSS Container Queries

Use container queries when a component should adapt to its parent size. Use media queries for page layout.

Goal

Make responsive components portable. Reduce coupling between component internals and page layout.

Rules

• Define a container before using container variants.
• Prefer inline-size unless height also matters.
• Name containers when multiple containers are nearby.
• Keep container nesting shallow.
• Avoid fixed heights when content changes across breakpoints.
• Do not replace every media query with container queries.