I only dabble in HTML, but for the kinds of layout I find myself doing, grid comes up more than flex does. Subgrid is needed for some tasks, but poorly supported still.
Container queries are a less-limited alternative to media queries.
When writing custom rules for other people's websites (using the Stylus extension), elem[attr=value] and variants (^=, etc) are very useful. :has() is useful for styling the parent of the actual element with the attributes but not in all browsers yet.
Last I checked it is still not possible in the wild to implement fully automatic dark-mode (etc.) theming (using HSL) even though colorspaces are in the spec for the relevant functions.
> I only dabble in HTML, but for the kinds of layout I find myself doing, grid comes up more than flex does.
It depends on whether the content is fixed to desktop monitors or responsive to mobile screens. Grid doesn't give the same responsiveness flexibility when the page is displayed on mobile.
In my experiments with grid vs flexbox, every single time I used grid, I had to switch over to flexbox the minute I needed the content to display on mobile screens.
My usage of grid turned out to be simply a different form of tables, which don't work well (or at all) on mobile screens.
What I did with grid was use media (or container, easier to debug at top level and necessary when nested) queries to do a completely separate layout for the same DOM when the viewport (or parent) was too small horizontally. The problem with flex is that it means "adjacent" elements can randomly wrap anywhere even if they really belong close to each other, whereas with grid I could arrange for closeness separately for each available horizontal size.
> The problem with flex is that it means "adjacent" elements can randomly wrap anywhere even if they really belong close to each other, whereas with grid I could arrange for closeness separately for each available horizontal size.
I don't put down a flex and leave it at that; I use media queries to change it between flex-horizontal and flex-vertical. This means that I either wrap at particular width for desktop, or "wrap" at every cell for mobile.
Granted, it's not perfect as it only supports two classes of screen size - desktop or mobile :-)
Container queries are a less-limited alternative to media queries.
When writing custom rules for other people's websites (using the Stylus extension), elem[attr=value] and variants (^=, etc) are very useful. :has() is useful for styling the parent of the actual element with the attributes but not in all browsers yet.
Last I checked it is still not possible in the wild to implement fully automatic dark-mode (etc.) theming (using HSL) even though colorspaces are in the spec for the relevant functions.