It's not CSS based, but I've had reasonable success with ResizeObserver based component size queries, at least in the context of small components that don't accept other nodes to render.

I've found this hook (https://github.com/react-spring/react-use-measure) to be reasonably robust, as long as you only use the size properties and don't rely on the accuracy of the positioning properties, which is not something that ResizeObserver is designed to handle (it can get out of date when the component moves due to dynamic content appearing/disappearing around it without actually resizing: https://github.com/react-spring/react-use-measure/issues/9).

It remains to be seen how this could scale when applied to larger "container" type components and the entire app though, as I imagine cascading re-renders as higher level elements resize could become an issue. Curious if people have experience with using ResizeObserver for component size queries at scale?

Focusing on window-based instead of component-based responsive queries was a mistake (or at least, it has overstayed its welcome). CSS Grid actually has some component-based responsiveness with auto-fit/auto-fill and minmax, although it's fairly limited.

https://css-tricks.com/auto-sizing-columns-css-grid-auto-fil...