Discussion on: How did you learn to flex your CSS muscles?

If you're supporting only new browsers, sure, go for Grid. If you don't want to lose out on more users, use Flexbox. If you don't want to lose any users, good luck and hack away 😜

I found the best way to exercise CSS is with practice, much like anything. I can read docs and tutorial all day, but until I actually sit down and apply it to a project -- it's almost worthless. Half the time I'll reach for a neat CSS trick I found, only to find that in production it doesn't work on half the browsers (if it even works at all the first time in dev). It's practicing with the trick that allows you to see it's limitations, and fully understand it's scope.

I love visual guides like 30 Seconds to CSS, CSS Filters playground, CSS Grid Generator, or CSS Tricks Flexbox guide.

But the best thing I've found is going on places like Dribbble where people post UI + animations and try to replicate them in CSS. If you're capable of translating an entire design into HTML/CSS, you'll probably pick up a few tricks along the way. Maybe pick up a daily challenge like Daily UI and focus on creating everything from scratch in CSS.

I also like to browse repos of design systems like Bootstrap, Semantic UI, etc, and see how they accomplish some of their components or modules -- and what "tricks" they use to make it work across browsers. Same thing on Codepen, it's a great place to find cool stuff and quickly fork, iterate, and experiment.