— by Eva


Container queries let you style elements based on their container’s size rather than the viewport, making them useful for responsive layouts. However, intrinsic layout techniques using custom properties can achieve similar results without the need for container queries. By combining flex or grid with clamp(), you can create fluid, responsive layouts that adapt naturally to their container.

Intrinsic layouts tend to be more flexible, especially when it comes to handling overflow, which can be tricky with container queries. Additionally, custom properties can be used directly in media queries, but not (yet) inside container queries.

Session CodePens

Intrinsic Layout

See this Pen on CodePen.

Container Queries

See this Pen on CodePen.

Browser Support