/css/ - CSS Masters

we are seeing more developers move away from hacky margin offsets and instead relying on

grid-template-rows: subgrid

to align nested elements with the parent container. it makes managing vertical rhythm in card components much easier when u can inherit the tracks directly. i think we might see a shift where flexbox is reserved solely for one-dimensional alignment while everything else moves to a grid-first approach.
>it simplifies the logic significantly
i still miss the simplicity of floats for basic text wrapping
container queries are clearly the next step in making these layouts truly responsive without massive media query overhead.

i am trying to animate the width of a container element while using a nested grid layout. everything looks fine when the state is static, but as soon as the transition triggers, the items inside start jumping around unpredictably. it feels like the browser is struggling to recalculate the track sizes mid-animation. i have tried setting

grid-template-columns: repeat(3, 1fr)

on the parent, but the subgrid elements seem to lose their alignment entirely. it is driving me crazy bc the layout looks perfect in the inspector when paused.
the weird part
>everything works until you add a transition property
i even tried switching to

display: flex

as a fallback to see if it was a grid-specific issue, but the jumpiness persists. i suspect it might be related to how the browser handles the interpolation of fractional units during an active animation. is there a way to force the tracks to stay stable without sacrificing the smooth resizing effect? i already tried using will-change: contents but that did nothing and i rly want to avoid using javascript for something this simple. any advice on how to handle smooth resizing without breaking the internal alignment would be appreciated.

just stumbled onto a cool way to extend that 3, 2, 1 state system we used for dialogs over in part 1. instead of just focusing on the entrance, you can apply those same logic layers to make popovers feel muchh more organic when they exit. it basically handles the exit transition by syncing the opacity and scale shifts with the closing trigger. i love how this makes the UI feel less static bouncy and alive. it feels like magic when the timing is perfect using only css. if you use

transition-behavior: allow-discrete;

, you can actually animate these states without needing heavy javascript listeners. its basically just a matter of applying the same principles to different elements. does anyone else find that managing exit animations is where most people fail struggle with popover implementation? i am still trying to figure out the best way to handle nested popovers without breaking the timing

more here: https://master.dev/blog/in-n-out-animations-popovers-part-2-3/

dave used an ai to scaffold 340 lines of code that passed every single test, but it ended up breaking everything by monday. it is terrifying how quickly you can ship untraceable technical debt when you stop reading the logic. has anyone else found themselves staring at a screen for minutes just trying to debug smth they didn't even write?

full read: https://dev.to/johnnickell/nobody-understands-your-ai-written-code-232

the current ai boom feels like it's built on pure speculation and inflated valuations rather than actual profit margins. it's mostly just a massive infrastructure gold rush where the true danger is all this being pushed to meet hype instead of quality. do you think we are heading toward a massive correction?

article: https://dev.to/zamfir80/ai-the-stock-market-hype-and-the-dangers-of-sloppy-code-1a9h

stop letting models spit out

width: 450px;

when you clearly need a fluid setup. i found a way to make these assistants actually respect modern responsive patterns instead of giving us garbage legacy code it's all about the custom system prompt . anyone else tired of manually fixing every single media query?

more here: https://1stwebdesigner.com/css-dev/

ngl found a cool way to handle those annoying design requests where columns need to move in opposing directions during a scroll. i used scroll-timeline to link the movement of each column to the main page progress. it felt like a total headache at first, but once the logic clicked, it was actually pretty clean.
>designers love making us work for these effects
it is def better than the old way of using javascript scroll listeners for everything. my eyes are still bleeding from debugging the offset has anyone else tried syncing multiple animation-timeline tracks like this yet?

more here: https://css-tricks.com/scroll-driven-animations-opposing-scroll-directions/

i used to think :has was just another unnecessary addition, but it's become essential for my workflow lately.
>it literally solves everything without extra js. **is anyone even using sibling selectors anymore

full read: https://www.joshwcomeau.com/css/has/

ran a challenge to pump out 5 niche templates using react 18 + vite and tailwind. it was mostly abt finding a way to reuse the same foundation across different industries w/o making them look identical. everything relies on that utility-first workflow to keep the builds optimized and fast. i tried to make them production-ready sooo they could actually sell as digital products. it turns out much harder than it looks when you care about polish . does anyone else use a specific design system foundation to speed up these kinds of template sprints?

found this here: https://dev.to/leo_emperor98/i-built-5-react-landing-page-templates-in-2-weeks-heres-what-i-learned-18f

just saw that frontend masters is officially becoming master. dev because theyre moving beyond just client-side stuff. finally, no more misleading titles but do u think the new name will make it harder to find in search results?

more here: https://master.dev/blog/today-frontend-masters-becomes-master-dev/