[smarkov]

> what used to be a complex blob of floats is now a simple grid layout.

And what used to be relatively simple static layouts designed for a 4:3 screen are now layouts that must accommodate a screen of any arbitrary aspect ratio and physical size. This means that most of your components will now have at least 2 layout states, one for desktop and one for mobile, usually horizontal and vertical respectively, accomplished by switching random layout related properties on and off. Arguably anything related to CSS layout comes with a ton of quirks and flex/grid are no exception. It's those quirks that put most people off CSS, because they're sometimes far from intuitive, hard to debug, and are just things you have to know.

[notpushkin]

> And what used to be relatively simple static layouts designed for a 4:3 screen are now layouts that must accommodate a screen of any arbitrary aspect ratio and physical size.

You should, yeah – it’s not inherent to CSS, though. For example on Android, your app can be ran on phone or tablet. I’d argue that the tools CSS provides for this are pretty easy to use.

> accomplished by switching random layout related properties on and off

You don’t have to, but it’s easier to understand usually.

For example, you can make a sidebar layout without @media (or @container) queries but you have to understand flexbox pretty well: https://every-layout.dev/layouts/sidebar/

(Personally, I’d just use an @container query here.)