Ever since CSS grid became a thing, I dumpstered all of the 3rd party web framework stuff I had been using. Placing elements in the right parts of the viewport (across all target devices) has always been 95% of the reason I consumed 3rd party libraries.
I find myself having to relearn Grid every time I try to use. It actually reminds me a lot of RegEx. Super powerful and helpful but nothing about it sticks in memory.
Also, check "massonary".
There are so many cool features in css being released today that soon that banner "Best viewed on Netscape 3 on 800*600 resolution" may be common in some niche design sites.
But more likely as "Best viewed on Google Canary xxx, on flip screen devices with 10 bit depth colorspace".
By the way, did you know there is a css spec for rounded screen devices?
The information environment is absolutely saturated with pollution from outdated answers to outdated questions. So while CSS might be getting to be reasonable, good luck to the random newbie trying to get things to work.
I guess I find keeping all the css properties in my head for all the different placement solutions cumbersome, flex and especially grid have a huge amount of functionality and custom properties, and I have been achieving everything fine using flex and a table when I need a literal table of data.
I almost always combine the two by way of a nested hierarchy of elements. Grid is used for the strategic layout, and then within each area I may have flex (or more grid) as appropriate.
As for a "literal table of data", I still use table elements for this exact purpose. I do not use tables for layout anymore, unless its for HTML email.
Grid seems to handle this better when you specify grid-template-column.
Anybody know a good flex-specific solution?
The searchable keyword for that is "responsive".
Using length units related to viewport size on max-widht may help.
CSS Tricks also has
See csswg