i'm so tired of seeing people jump straight to media queries just to fix a tiny bit of internal spacing. it makes no sense when you've got a component that lives in both a sidebar and a main content area. if the container is narrow, the padding should shrink regardless of the viewport size. i've been using @container for months now and it's much cleaner. you don't end up with this massive mess of breakpoints that only apply to one specific element.
>it works everywhere regardless of screen sizethat's literally the point of a component-driven workflow. if you aren't using them yet, you're basically just making life harder for yourself. it's
not that hard to learn. i hate seeing codebases where every single margin adjustment is tied to the global window width.
@container (min-width: 300px) {.card {padding: 2rem;}}it's just
better logic for modern layouts. what's your go-to strategy for handling component padding in dense grids?