Spent 2 years writing media queries by hand until a dev on my team opened devtools and showed me container queries | CSS Battle Tactics - The Design Community Hub
Spent 2 years writing media queries by hand until a dev on my team opened devtools and showed me container queries
I was building a dashboard with like 40 cards that needed to resize based on their parent, not the viewport, and I had written something like 600 lines of media queries to guess at the breakpoints. Last Tuesday a frontend dev on my team named Priya opened devtools, typed @container into a card, and the whole thing just worked without a single viewport check. I sat there kind of stunned because I had been fighting this exact layout problem since 2022 and just assumed media queries were the only tool for it. The part that really got me was when she showed me you can name containers with container-name and then target them separately, which would have saved me from adding a wrapper div on three different pages. Now I'm going back through old projects and half of them could drop 300 plus lines of CSS. Has anyone here made the switch on a big existing codebase, and did you rip out the old queries or just leave them and layer containers on top?